制作自己的流体模板

我需要这个标记 - 左右边栏的静态宽度（例如300px），中间的容器必须是流体。制作自己的流体模板

UPD：侧边栏捕捉到brovser双方

我怎样才能做到这与Twitter的自举（当前版本）？

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

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

来源

2012-08-07 Neka

对于这种情况，我们应避免使用跨度类，所以帽子我们可能会采取对局势的控制。

我们将为此场景创建自己的边栏。

像这样：

把这个在你的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

来源

2012-08-07 17:33:44

你真棒！谢谢！ – Neka 2012-08-08 02:30:50

我只是一个新手，我正在回答这些类型的问题，因为我仍在训练自己。问题解决事物的打字。我还很不棒。但是，谢谢。 – 2012-08-08 04:13:15

给予宽度的百分比。
更新添加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-07 12:18:47 osyan

没有，思路是边栏必须与固定宽度 – Neka 2012-08-07 15:36:15

制作自己的流体模板

回答

相关问题