1

マークアップが必要です。左右のサイドバーの幅は静的で（たとえば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>
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

幅をパーセントで指定します。span6に 追加された
更新により、ウィンドウのサイズを変更したときに、右側のdivが落ちないようになりましたfloat:left;

 <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 に答える