如何避免浮动元素和高度的div换行

Question

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

补充工具栏需要保持100px的原样。 内容似乎环绕侧边栏，第一个.row占据侧边栏的高度。 我试图摆脱包装。

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

Fiddle.

更改.container-fluid元素包装器位置。因为您使用bootstrap来构建网格布局。因此，.container-fluid应该包装所有页面元素。

Answer 2

将overflow:hidden添加到#content。 https://jsfiddle.net/kd4z0vyy/