dimanche 19 avril 2015

Bootstrap row extends beyond encompassing columns

I have been attempting to replicate Quora's design in Bootstrap when I encountered following problem. On every question page of Quora, say this one, there is a left sidebar. So for the first section (titled 'Want Answers'), I have a following structure:



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


Left sidebar is 2 columns wide. Now, as the image displays, each row (horizontal highlighting) extends want-answers div (vertical blue highlighting). Why is so? Shouldn't row encompass the full width of encompassing col-lg-2 div?


enter image description here


Aucun commentaire:

Enregistrer un commentaire