Twitter Bootstrap 网格问题：列对齐

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>

如您在我的 fiddle 中所见，列未正确对齐。为什么第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是解决不了我的问题的。所以选项使用同位素（包装）或 moTimeline。在我的特殊情况下，我使用 moTimeline，因为同位素的开销太大。

Twitter Bootstrap 网格问题：列对齐

Twitter Bootstrap grid issue: column alignment

twitter-bootstrap

angular-ui-bootstrap

twitter-bootstrap-3