Question

我需要标记 - 左侧和右侧边栏有静态宽度（例如300px），中间容器必须是流动的。

UPD：侧边栏与经纪人的边缘对齐

如何使用twitter-bootstrap（当前版本）执行此操作？

现在我有了这个标记，但结果不是我需要的

<div class="container-fluid">
<div class="row-fluid">
    <div class="span3" style="width: 300px;">
        <div class="well sidebar-nav">
            &nbsp;
        </div>
    </div>
    <div class="span6">
        &nbsp;
    </div>
    <div class="span3" style="width: 300px;">
        <div class="well sidebar-nav">
            &nbsp;
        </div>
    </div>
</div>
</div>

Answer 1

对于这种情况，我们将避免使用span类，因此我们可以控制情况。

我们将为此方案创建自己的侧边栏。

像这样：

把它放在你的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>

这些代码应输出与此类似的页面

3column layout

Answer 2

给出宽度百分比 已更新已将float:left;添加到span6，因此当您重新调整窗口大小时，右侧div不会降低

 <div class="container-fluid">
<div class="row-fluid">
    <div class="span3" style="width: 20%;">
        <div class="well sidebar-nav">
            &nbsp;
        </div>
    </div>
    <div class="span6" style="width: 50%;float: left;">
        &nbsp;
    </div>
    <div class="span3" style="width: 20%;">
        <div class="well sidebar-nav">
            &nbsp;
        </div>
    </div>
</div>
</div>

制作自己的流体模板

2 个答案: