引導行超出包含列

我一直在嘗試在Bootstrap中複製Quora的設計，當遇到以下問題時。在Quora的每個問題頁面上，說this one，有一個左側邊欄。因此，對於第一部分（標題爲「希望答案」），我有以下結構：引導行超出包含列

<div class="col-lg-2"> 
    <div id="left-sidebar"> 
     <div id="want-answers"> 
      <p><small>18 WANT ANSWERS</small></p> 
      <hr> 
      <div class="row"> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
      </div> 

      <div class="row"> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
       <div class="col-lg-3"><img src="img/350x350.gif}" alt="" width="32px" height="32px"></div> 
      </div> 
     </div> 
     <!-- /#want-answers -->

左邊欄是2列寬。現在，隨着圖像顯示，每行（水平突出顯示）擴展爲want-answers div（垂直藍色突出顯示）。爲什麼如此？不應該包含包含col-lg-2 div的全部寬度？

enter image description here

來源

2015-04-20 abhinavkulkarni

我不知道這是否是一個問題，但嘗試收出你這樣的圖像標記：在你的代碼<img src="img/350x350.gif}" alt="" width="32px" height="32px"/> 沒有尾隨斜線。

實現您正在尋找的內容的很大一部分將與覆蓋引導程序應用於行和/或列的默認填充和頁邊距有關。我能夠包含的圖像，並進行了以下修改居中他們： DEMO

CSS：

#left-sidebar { 
text-align:center; 
background:#ccc; 
} 
.min-width { 
min-width:153px; 
} 
#want-answers { 
background:#f1f1f1; 
min-width:153px; 
width:100%; 
text-align:center; 
} 
.no-marg-pad { 
padding:0; 
margin:0; 
} 
.img-line { 
background:#000; 
width:100%; 
min-width:153px; 
} 
.img-padding { 
padding:0; 
margin-bottom:10px; 
}

HTML

<div id="left-sidebar" class="col-lg-2 col-md-2 col-sm-2 col-xs-2 no-marg-pad min-width"> 
<div class="row no-marg-pad"> 
    <div id="want-answers" class="col-xs-12"> 
     <p><small>18 WANT ANSWERS</small></p> 
    </div> 
</div> 
<div class="row no-marg-pad"> 
    <div class="img-line"> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
    </div> 
</div> 
<div class="row no-marg-pad"> 
    <div class="img-line"> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
     <div class="col-xs-3 img-padding"> 
      <img class="img-responsive" src="img/350x350.gif}" alt="" align="center" width="32px" height="32px" /> 
     </div> 
    </div>

你可能想看看一兩件事是確定的中小尺寸屏幕的列寬也是如此col-sm-2 col-md-2

來源

2015-04-20 07:37:11 Kinburn101

我不知道，如果你有#want-answers或#left-sidebar任何自定義CSS，但一個問題是，4-32px圖像通常會超出col-lg-2的寬度。改變他們img-responsive使他們望而卻步，需要..

<div class="col-lg-3"> 
    <img src="//placehold.it/350" alt="" width="32px" height="32px" class="img-responsive"> 
</div>

http://codeply.com/go/OtSvmYQfcX

來源

2015-04-20 10:35:27 ZimSystem

引導行超出包含列

回答

相關問題