Line misalignment

Asked

Viewed 115 times

0

Using the bootstrap I have the following code DEMO:

<div class="container">

        <div class="page-header">
            <h1>Seja bem vindo <small>Selecione um curso:</small></h1>
        </div>

        <div class="well col-sm-4">
            <h4 class="text-center"><strong>Aminésia de velhos e novos durante a vida toda Aminésia de velhos e novos durante a vida toda</strong> </h4>
            <h5 class="text-center"><strong>Turma:</strong> Turma 4</h5>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>

        <div class="well col-sm-4">
            <h3 class="text-center"><strong>Curso:</strong> Aminésia</h3>
            <h4 class="text-center"><strong>Turma:</strong> Turma 4</h4>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>

        <div class="well col-sm-4">
            <h3 class="text-center"><strong>Curso:</strong> Aminésia</h3>
            <h4 class="text-center"><strong>Turma:</strong> Turma 4</h4>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>
        <div class="well col-sm-4">
            <h3 class="text-center"><strong>Curso:</strong> Aminésia</h3>
            <h4 class="text-center"><strong>Turma:</strong> Turma 4</h4>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>

        <div class="well col-sm-4">
            <h3 class="text-center"><strong>Curso:</strong> Aminésia</h3>
            <h4 class="text-center"><strong>Turma:</strong> Turma 4</h4>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>

        <div class="well col-sm-4">
            <h3 class="text-center"><strong>Curso:</strong> Aminésia</h3>
            <h4 class="text-center"><strong>Turma:</strong> Turma 4</h4>
            <h5 class="text-center"><strong>Inicio:</strong> 01/01/2014</h5>
            <h5 class="text-center"><strong>Final:</strong> 01/12/2014</h5>
            <a href="#" class="btn btn-success center-block">Acessar</a>
        </div>

    </div>

The problem is in the first div, it has a larger text than the others so the div below loses line alignment.

Those divs are generated dynamically. I know I may be making a if to be adding a row every three divs.

But I wonder if there’s another way without polluting with ifs.

html twitter-bootstrap

  • You cannot set a minimum height pro box that has the largest text?

  • @bfavaretto, I don’t understand!

  • 1

    This problem is because of the way floats work (the <div class="well"> are floated). If all Divs have the same height, the problem disappears. I am suggesting that you swallow the height of the Divs to a reasonable size to fit the largest text. Example: http://www.bootply.com/vuZL97HOLB

  • @bfavaretto, got it... That’s better than adding a Row?

  • I don’t have much experience with bootstrap, adding a Row seems another good solution.

  • Man this can solve your problem, I had the same recently and it was what I needed. http://masonry.desandro.com/

Show 1 more comment

2 answers

2


Your problem is the fact that every element with the class col-sm-4 or any other col-X is floated to the left as it is the form in which the framework works the columns.

For HTML the solution is to wrap every 12 columns in a row as dictated by the framework you are using:

<div class="container">
    <div class="row">
        <div class="col-sm-4">1</div>
        <div class="col-sm-4">2</div>
        <div class="col-sm-4">3</div>
    </div>
    <div class="row">
        <div class="col-sm-4">4</div>
        <div class="col-sm-4">5</div>
        <div class="col-sm-4">6</div>
    </div>
    <!-- ... -->
</div>

Solution

You can apply a solution in two ways, all depending on how you place the elements on the page:

Via PHP

If PHP is the one that generates your HTML to display on the page, a simple check is enough to organize the columns in groups of 12 within rows.

Example

$dados = array("1","2","3","4","5","6","7","8");

echo '<div class="container"><div class="row">';

$i=1;

foreach($dados as $col) {

    echo '<div class="col-sm-4">'.$col.'</div>';

    if ($i%3==0) {
        echo '</div><div class="row">';
    }

    $i++;
}

echo '</div></div>';

Upshot:

<div class="container">
  <div class="row">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
  </div>
  <div class="row">
    <div class="col-sm-4">4</div>
    <div class="col-sm-4">5</div>
    <div class="col-sm-4">6</div>
  </div>
  <div class="row">
    <div class="col-sm-4">7</div>
    <div class="col-sm-4">8</div>
  </div>
</div>

See example in Ideone.

Via jQuery

If the organization of the elements has to be performed on the client side, that is, through DOM manipulation, you can make use of jQuery to pick up blocks of 3 <div/> and involve them in a <div class="row"/>.

Example:

var divs = $(".container > div");
for (var i = 0; i < divs.length; i += 3) {
    divs.slice(i, i + 3).wrapAll("<div class='row'></div>");
}

The result is the same as the one shown above for PHP, but I’ve built an example in Jsfiddle where I used the class col-xs-4 so that the speakers are always visible even on super-small screen devices.

$(document).ready(function() {
  var divs = $(".container > div");
  for (var i = 0; i < divs.length; i += 3) {
    divs.slice(i, i + 3).wrapAll("<div class='row'></div>");
  }
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
  <div class="well col-xs-4">texto</div>
  <div class="well col-xs-4">mais texto que o texto</div>
  <div class="well col-xs-4">3</div>
  <div class="well col-xs-4">texto</div>
  <div class="well col-xs-4">bué da mais texto que o texto do texto</div>
  <div class="well col-xs-4">6</div>
  <div class="well col-xs-4">7</div>
  <div class="well col-xs-4">8</div>
</div>

Note: I presented the solutions server-side and client-side for the most common language and framework, but the logic is the same for any other ASP or native Javascript type.

0

A way to solve this problem:

Using "Row" for each set of columns (until closing the grid of 12):

<div class="row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>
<div class="row">
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
    <div class="col-sm-4">...</div>
</div>

  • The problem is that the content is added dynamically, so you would need to do an if to be seeing when you have 3, to be adding and closing a Row.

Browser other questions tagged html twitter-bootstrap

You are not signed in. Login or sign up in order to post.