Line Misalignment

Question

Line Misalignment

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Using 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 text greater than the others so the div below loses line alignment.

These divs are generated dynamically. I know I can be doing if to be adding row to every 3 divs .

But I would like to know if you have a non-polluting way with ifs .

html twitter-bootstrap

asked by anonymous 02.10.2014 / 20:05

2 answers

0

One 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>

02.10.2014 / 21:18

Function does not remove array elements Problem when redirecting proper DNS to an ip outside of my server. [closed]

score 2 · Accepted Answer

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

As for HTML, the solution is to wrap every 12 columns in a row as dictated by the framework you're 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 put the elements on the page:

Via PHP

If PHP is the one who generates your HTML to display on the page, a simple check is enough to organize the columns into 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>';

Result:

<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 on Ideone .

Via jQuery

If you have to organize the elements on the client side, ie by manipulating the DOM, you can use jQuery to pick up blocks of 3% with% and wrap them in% / p>

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 above for PHP, but I put an example in JSFiddle where I used the class <div/> so that the columns are always visible even on devices with super-small screen.

$(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><divclass="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 introduced the server-side and client-side solutions for the most common language and framework, but the logic is the same for any other ASP type or native JavaScript.