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>

＆＃34;内容＆＃34; div包围＆＃34;侧边栏＆＃34;，我试图避免这种情况。

第一行＆＃34;行＆＃34;在内容中占据了侧边栏的高度，我也试图避免这种情况。

Answer 1

这是更新的DEMO： 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

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

2 个答案: