Twitter引导网格没有对齐

Question

我遇到问题让我的网格正确对齐。这是HTML

<div class="span6" id="content">

        <!-- Category 2 is Programming category. -->

        <?php $programming_posts = get_posts('2'); ?>

        <div class="row-fluid">

            <?php foreach($programming_posts as $key => $post){ ?>

            <div class="span6 well well-small" id="post-preview">

                <?php echo $post->post_excerpt;?>

            </div>

            <?php }?>

        </div>

    </div>

这是CSS

#post-preview{
border: 1px solid rgba(140,140,140,1);
border-radius: 2px;
max-height: 135px;
min-height: 135px;
margin-bottom: 5px;

}

正如您所看到的，第一行未与其后面的行对齐。第一行是具有右对齐的行。我不确定如何解决这个问题？

Answer 1

你的html结构很糟糕，因为row-fluid最多只能有12列，即在这种情况下只有两个<div class="span6 well well-small" id="post-preview">元素。但在您的情况下，您要将所有post-preview div添加到单个row-fluid

你的html必须是结构应该像

<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
    </div>
    <div class="span6 well well-small" id="post-preview2">
    </div>
</div>
<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
    </div>
    <div class="span6 well well-small" id="post-preview2">
    </div>
</div>

同样是id should be unique in a document，由于循环，您有许多div个ID post-preview

Answer 2

方法A：

由于您有4个区块，因此可以使用span3类：

<div class="span3 well well-small" id="post-preview">
    <?php echo $post->post_excerpt;?>
</div>

方法B：

如果你想保持宽度并且只在一行中显示一对块，那么你可以将div对分成单独的row-fluid（PHP代码仅供参考）：

<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
        <?php echo $post->post_excerpt;?>
    </div>
    <div class="span6 well well-small" id="post-preview2">
        <?php echo $post->post_excerpt;?>
    </div>
</div>
<div class="row-fluid">
    <div class="span6 well well-small" id="post-preview1">
        <?php echo $post->post_excerpt;?>
    </div>
    <div class="span6 well well-small" id="post-preview2">
        <?php echo $post->post_excerpt;?>
    </div>
</div>