对于这种情况,我们将避免使用跨度类,因此我们可以控制情况。
我们将为这个场景创建自己的侧边栏。
像这样:
把它放在你的CSS中。
.container-fluid > .sidebar-nav {
position: relative;
top: 0;
left:auto;
width: 300px;
}
.left {
float:left;
}
.right {
float:right;
}
.container-fluid > .content {
margin: 0 320px;
}
将此 thml 标记放入您的文档中。
<div class="container-fluid">
<div class="sidebar-nav left">
<div class="well">
<h5>Sidebar</h5>
Lorem ipsum dolor sit amet, dianam Interposito brutis aeternae reversurus eum. Crescente mihi servitute meam ad nomine Maria cum magna aliter refundens domum Taliarchus eius in fuerat construeret cena reges. Tharsos determinatio vestes in lucem in fuerat est Apollonius. Navis fortiter invenit quasi nomen ibique parvulam eodem mulier. Denique laetare quod ait regem Boreas quam crucis in.
</div>
</div>
<div class="sidebar-nav right">
<div class="well">
<h5>Sidebar</h5>
Lorem ipsum dolor sit amet, dianam Interposito brutis aeternae reversurus eum. Crescente mihi servitute meam ad nomine Maria cum magna aliter refundens domum Taliarchus eius in fuerat construeret cena reges. Tharsos determinatio vestes in lucem in fuerat est Apollonius. Navis fortiter invenit quasi nomen ibique parvulam eodem mulier. Denique laetare quod ait regem Boreas quam crucis in.
</div>
</div>
<div class="content">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, dianam Interposito brutis aeternae reversurus eum. Crescente mihi servitute meam ad nomine Maria cum magna aliter refundens domum Taliarchus eius in fuerat construeret cena reges. Tharsos determinatio vestes in lucem in fuerat est Apollonius. Navis fortiter invenit quasi nomen ibique parvulam eodem mulier. Denique laetare quod ait regem Boreas quam crucis in.</p>
</div>
</div>
这些代码应输出与此类似的页面
![3列布局](https://i.stack.imgur.com/UHmA8.png)