關於網格的引導混淆

我試圖將我的無響應網站轉換爲使用引導程序的響應。我從頂部的橫幅開始。它是1000px * 400像素。它的右上角有一個登錄鏈接。在左下方有一個網站標題說（我的網站標題：標語）。在右下方有搜索。我能夠實施它，但對如何做到這一點感到困惑。我的網站是固定容器1024px。關於網格的引導混淆

enter image description here

<div class="container" style="max-width:1024;width:98%" > 
     <div id="banner-holder" class="row"> 
     <div class="col-md-12"> 
      <div class="row"> 
       <div class="col-md-12 clearfix"> 
        <p style="float:right;">Login links</p> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 clearfix"> 
        <p style="float:left;">Site banner title</p> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 clearfix"> 
        <p style="float:right;">search box</p> 
       </div> 
      </div> 
     </div>  
     </div><!-- row holding bannder ends here--> 
    </div><!--container ends here-->

我有幾個疑問？像是可以直接在一行內給出三行或應該我給一個像上面給出的中間col-md-12？

此代碼是正確的方式來做我想達到的目標或有更好的方法，這是從引導規則正確..我是bootstrap新手，我感到內疚我不遵守規則。

來源

2014-03-06 MYNE

你的標記沒有任何不正確的地方，但是你不需要在每個元素周圍額外的'row'和'col-md-12'。 – technophobia

@technophobia是否需要在每行內添加col-md- *，最多可以添加12個，如果可能，可以在清理不必要的東西后添加答案 – MYNE

就像我在評論中提到的那樣，你的嵌套是正確的，但可能是無關緊要的。

簡化的標記

<div class="container" style="max-width:1024;width:98%" > 
    <div id="banner-holder" class="row"> 
     <div class="col-md-12"> 
      <div class="clearfix"> 
       <p class="pull-right">Login links</p> 
      </div> 
      <div class="clearfix"> 
       <p class="pull-left">Site banner title</p> 
      </div> 
      <div class="clearfix"> 
       <p class="pull-right">search box</p> 
      </div> 
     </div>  
    </div><!-- row holding bannder ends here--> 
</div><!--container ends here-->

爲了回答上述評論你的問題：

是否有必要COL-MD-*每一行裏面添加最多12個？

即幾乎正確的col-md-*總和應不爲了維持介質設備分辨率所需的列布局超過行內 12。

備註偏移：
如果你使用col-*-offset-*，確保col小號和offset S的總和並不在行內不超過12。

來源

2014-03-06 14:01:35 technophobia

關於網格的引導混淆

回答

相關問題