Question

如果有人可以帮我解决问题，那将是非常好的：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>

正如您在我的小提琴中看到的那样，列未正确对齐。为什么第3列和第4列之间存在如此大的差距？

提前感谢您的帮助，非常感谢！

Answer 1

您需要添加另一行。每行最多可以12列。之后你需要再做一行。

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

Answer 2

你需要在另一行内排。

<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

编辑：您可以将结果分成两个独立的部分，例如以下列方式

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

Answer 3

似乎只能用css来解决我的问题。因此选项使用同位素（packery）或moTimeline。在我的特殊情况下我使用moTimeline因为同位素有太多的开销。

Twitter Bootstrap网格问题：列对齐

3 个答案: