如何在 Bootstrap 3 中避免 div 换行和行高

Question

这里的代码： https://jsfiddle.net/817Lcj4d/2/

<div id="sidebar">
    <ul>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

<div id="content">
    <div class="row">
        <div class="col-sm-4">
            content
        </div>
    </div>
    <div class="row">
        <div class="col-sm-4">
            content
        </div>
    </div>
</div>

“内容”div 包裹在“侧边栏”周围，我试图避免这种情况。

内容中的第一个“行”占用侧边栏的高度，我也在努力避免这种情况。

Answer 1

这里是更新的演示： https://jsfiddle.net/817Lcj4d/9/

HTML：

<div id="sidebar">
    <ul>
        <li>item</li>
        <li>item</li>
    </ul>
</div>
<div id="content">
    <div class="row">
        <div class="col-sm-4">content</div>
    </div>
    <div class="row">
        <div class="col-sm-4">content</div>
    </div>
</div>

CSS：

#sidebar {
background: red;
  width: 15%;
  float: left;
  min-height: 100%;
}
#content {
  background: yellow;
  float: left;
  width: 85%;
}

Answer 2

在#content 上似乎有一个边距，并且少一行就可以了：

#content {
    margin-left: 115px;
}

<div id="content">
    <div class="row">
        <div class="col-sm-4">content</div>
        <div class="col-sm-4">content</div>
    </div>
</div>

Demo

如果您对灵活的侧边栏宽度感到满意，只需将其也放入 Bootstrap 网格中：

<div class="container-fluid">
    <div class="row">
        <div id="content" class="col-xs-12 col-sm-8 pull-right">
            <div class="row">
                <div class="col-xs-6">content</div>
                <div class="col-xs-6">content</div>
            </div>
        </div>
        <div id="sidebar" class="col-xs-12 col-sm-4 pull-left">
            <ul>
                <li>item</li>
                <li>item</li>
            </ul>
        </div>
    </div>
</div>

Demo 2

响应您的评论...多一层标记，您可以拥有所有您喜欢的行。

Demo 3