我试图用Twitter Bootstrap 3做一个两列全高布局。Twitter Bootstrap 3似乎不支持全高布局。 我想做的是:

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

如果内容增长,导航也应该增长。

高度100%为每个父级是行不通的,因为有些情况下内容是一行。 立场:绝对似乎是错误的方式。 Display: table和Display: table-cell解决了这个问题,但不够优雅。

HTML:

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

有办法使它与默认的推特引导3类?


当前回答

如果你所关心的只是设定颜色,有一个更简单的方法。

把这个放在你身体标签的第一个或最后一个

<div id="nfc" class="col col-md-2"></div>

这是CSS

#nfc{
  background: red;
  top: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  z-index: -99;
}

你只是在创建一个形状,把它固定在页面后面,然后把它拉伸到最大高度。通过使用现有的引导类,您将获得正确的宽度,并且它将保持响应。

ofc的这种方法有一些限制,但如果它用于页面的根结构,它是最好的答案。

其他回答

因此,你的最佳选择似乎是用负边际底部策略来对抗填充底部。

我举了两个例子。一个是<header>在.container内,另一个是<header>在.container外。

两个版本都可以正常工作。注意使用下面的@media查询,这样它就可以在较小的屏幕上删除额外的填充…

@media screen and (max-width:991px) {
    .content { padding-top:0; }
}

除此之外,这些例子应该可以解决您的问题。

试试这个

<div class="row row-offcanvas row-offcanvas-right">
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">Nav     Content</div>
<div class="col-xs-12 col-sm-9">Content goes here</div>
</div>

这使用Bootstrap 3,所以不需要额外的CSS等…

试试这个

 <div class="container">
     <!-- Header-->         
  </div>
</div>
 <div class="row-fluid">
     <div class="span3 well">
         <ul class="nav nav-list">
             <li class="nav-header">Our Services</li>
                <!-- Navigation  -->
             <li class="active"><a href="#">Overview</a></li>
             <li><a href="#">Android Applications</a></li>
             <li class="divider"></li>
         </ul>
     </div>
     <div class="span7 offset1">
      <!-- Content -->         
     </div>
 </div>

访问http://www.sitepoint.com/building-responsive-websites-using-twitter-bootstrap/

感谢Syed

我考虑了一个微妙的改变,它不会改变默认的引导行为。 我只能在需要的时候使用它:

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

所以我可以这样使用它:

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

你在JAvascript的部分中看到引导程序的修复了吗??

我认为这是最好最简单的解决办法。

看看那里:http://getbootstrap.com/javascript/#affix