引导3两列全高

我试图用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 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

2013-10-12 18:55:09

其他回答

你可以达到你想要的填充底部:100%;margin-bottom: -100%;戏法，你可以在这把小提琴上看到。

我稍微改变了你的HTML，但是你可以用下面的代码用你自己的HTML达到同样的结果

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

2013-10-07 20:26:20

据我所知，你可以使用5种方法来完成这个任务:

使用CSS显示表/表格单元格属性或使用实际的表。在包装器内使用绝对定位元素。使用Flexbox显示属性，但到今天为止，它仍然有部分支持使用伪列技术模拟全列高度。使用填充/边距技术。看到的例子。

Bootstrap:我在这方面没有太多经验，但我不认为他们提供了这样的样式。

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}

2013-10-08 08:03:32

试试这个

 <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

2013-10-12 18:55:09

好的，我已经实现了同样的事情使用Bootstrap 3.0

带有最新引导的示例

http://jsfiddle.net/HDNQS/1/

HTML:

<div class="header">
    whatever
</div>
<div class="container-fluid wrapper">
    <div class="row">
        <div class="col-md-3 navigation"></div>
        <div class="col-md-9 content"></div>
    </div>
</div>

SCSS:

html, body, .wrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

$headerHeight: 43px;

.navigation, .content {
    display: table-cell;
    float: none;
    vertical-align: top;
}

.wrapper {
    display: table;
    width: 100%;
    margin-top: -$headerHeight;
    padding-top: $headerHeight;
}

.header {
    height: $headerHeight;
}

.row {
    height: 100%;
    margin: 0;
    display: table-row;
    &:before, &:after {
        content: none;
    }
}

.navigation {
    background: #4a4d4e;
    padding-left: 0;
    padding-right: 0;
}

2013-10-15 10:30:44

一个纯粹的CSS解决方案是很简单的，它就像一个跨浏览器的魅力。

只需向nav列和content列添加一个较大的内边距和一个同样大的负边距，然后将它们的行包装到一个隐藏了溢出的类中。实时视图编辑视图

超文本标记语言

<div class="container">

  <div class="row">
    <div class="col-xs-12 header"><h1>Header</h1></div>
  </div>

  <div class="row col-wrap">

    <div class="col-md-3 col">
      <h1>Nav</h1>
    </div>

    <div class="col-md-9 col">
      <h1>Content</h1>
    </div>

  </div>
</div>

CSS

.col{
margin-bottom: -99999px;
padding-bottom: 99999px;
}

.col-wrap{
overflow: hidden; 
}

好运！

2013-10-10 11:47:28

引导3两列全高

推荐文章

最新文章

标签