Строка Bootstrap распространяется за пределы столбцов

Question

Я пытаюсь реплицировать дизайн Quora в Bootstrap, когда у меня возникла следующая проблема. На каждой странице вопроса 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?

Answer 1

Я не уверен, если это проблема, но попробуйте закрыть ваши тег изображений, как это: в вашем коде <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

Answer 2

Я не уверен, если у вас есть какие-либо пользовательские CSS для #want-answers или #left-sidebar, но одна проблема заключается в том, что 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