1

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

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

2 回答 2

1

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

我们将为这个场景创建自己的侧边栏。

像这样：

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

于 2012-08-07T17:33:44.147 回答
0

给宽度一个百分比。
已更新添加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>
于 2012-08-07T12:18:47.420 回答