Twitter Bootstrap Question posted in

Twitter Bootstrap grid issue: column alignment

it would be really great if somebody can help me with an issue: http://jsfiddle.net/wruetay4/4/

<div class="container">
<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf ag asgas gas gasgasgasgasgasg</div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd</div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf gasgasgasgasgasg</div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf ag asgas gas gasgasgasgasgasg</div>
    </div>
</div>

As you can see in my fiddle, the columns are not correctly aligned. Why is there between column 3 and 4 such a big gap?

Thanks in advance for any help, it is really appreciated!

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    It seems that it is not possible to solve my problem only with css. So the options are using isotope (packery) or moTimeline. In my special case im using moTimeline because isotope has too much overhead.


  2. 0

    You need to add another row. In each row can be max 12 col. After that you need to make another row.

    <div class="container">
<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf ag asgas gas gasgasgasgasgasg</div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd</div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf gasgasgasgasgasg</div>
    </div>
    <div class="col-lg-6 col-md-6 col-xs-6">
        <div class="content">tesx asdasdasdasdasd astasdasdasd asqwtsfafasfasdasd gtqasdasdasd wrasfgagsasdasdasd qdas wfa sfasfasfasfasf ag asgas gas gasgasgasgasgasg</div>
    </div>
</div>
    Login or Signup to reply.
  3. 0

    You need to have row inside another row.

    <div class="row">
    <div class="col-md-6">
        <div class="row">
            <div class="col-md-12">
                Column one
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                Column two
            </div>
        </div>
    </div>
</div>

    Have a look at JSFiddle example

    EDIT: You can divide your result in two separated parts for example in following way

    <?php
    $query = $pdo->query("SELECT * FROM tablename ORDER BY date");
    $column1 = "";
    $column2 = "";
    while ($result = $query->fetch()) {
        if ($i % 2 == 0) { // the number of row is even
            $column1 .= "<div class="col-md-12">" . $result['value'] . "</div>";
        } else { // the number of row is odd
            $column2 .= "<div class="col-md-12">" . $result['value'] . "</div>";
        }
        $i++;
    }
?>

<div class="row">
    <div class="col-md-6">
        <div class="row">
            <?php echo $column1; ?>
        </div>
        <div class="row">
            <?php echo $column2; ?>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search