Twitter引導程序網格未對齊

我遇到了問題，使我的網格正確對齊。下面是HTMLTwitter引導程序網格未對齊

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

}

正如你所看到的第一行不與後自帶的行對齊。第一行是右對齊的行。我不知道如何解決這個問題？

enter image description here

來源

2013-07-12 user1924247

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

來源

2013-07-12 11:23:40

我看到我在循環內創建了一個條件，每兩個帖子創建一個新行。謝謝。 – user1924247

解決方法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>

來源

2013-07-12 11:27:26 mishik

Twitter引導程序網格未對齊

回答

相關問題