如何避免在float元素和高度上使用div換行

Question

演示： https ： //jsfiddle.net/e04wfxj6/

補充工具欄必須保持為100px。 內容似乎環繞着側邊欄，第一個.row占據了側邊欄的高度。 我想擺脫包裝。

 #sidebar { background: tomato; width: 100px; float: left; } #sidebar ul { padding-left: 0; } #sidebar ul li { list-style: none; } #content { background: beige; margin-left: 100px; } #content .row { background: brown; } #content .row > div { background: red; } 

 <div id="sidebar"> <ul> <li>item</li> <li>item</li> </ul> </div> <div id="content"> <div class="container-fluid"> <div class="row"> <div class="col-xs-3">3</div> <div class="col-xs-4">4</div> </div> </div> <div class="row"> <div class="col-xs-3">3</div> <div class="col-xs-4">4</div> </div> </div> 

Answer 1

小提琴。

更改.container-fluid元素包裝的位置。 因為您使用引導程序來構建網格布局。 因此， .container-fluid應該包裝所有頁面元素。

Answer 2

將overflow:hidden添加到您的#content 。 https://jsfiddle.net/kd4z0vyy/