引导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类?

当前回答

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

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

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

2013-10-09 15:03:48

其他回答

试试这个

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

2013-10-09 07:17:33

try

<div class="container">
    <div class="row">
        <div class="col-md-12">header section</div>

    </div>
     <div class="row fill">
        <div class="col-md-4">Navigation</div>
        <div class="col-md-8">Content</div>

    </div>
</div>

fill类的CSS如下所示

 .fill{
    width:100%;
    height:100%;
    min-height:100%;
    padding:10px;
    color:#efefef;
    background: blue;
}
.col-md-12
{
    background: red;

}

.col-md-4
{
    background: yellow;
    height:100%;
    min-height:100%;

}
.col-md-8
{
    background: green;
    height:100%;
    min-height:100%;

}

为了供你参考，请看看小提琴。

2013-10-08 06:49:39

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

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

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

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

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

2013-10-12 01:04:00

我写了一个与Bootstrap兼容的简单CSS来创建完整的宽度和高度表:

小提琴:https://jsfiddle.net/uasbfc5e/4/

原则是:

在主DIV上添加“tablefull” 然后，下面的DIV将隐式地创建行行下面的DIV是单元格你可以使用类"tableheader"作为头文件或类似的文件

HTML:

<div class="tablefull">
    <div class="tableheader">
        <div class="col-xs-4">Header A</div>
        <div class="col-xs-4">B</div>
        <div class="col-xs-4">C</div>
    </div>
    <div>
        <div class="col-xs-6">Content 50% width auto height</div>
        <div class="col-xs-6">Hello World</div>
    </div>
    <div>
        <div class="col-xs-9">Content 70% width auto height</div>
        <div class="col-xs-3">Merry Halloween</div>
    </div>
</div>

CSS:

div.tablefull {
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
}

div.tablefull>div.tableheader, div.tablefull>div.tableheader>div{
    height: 0%;
}

div.tablefull>div {
    display: table-row;
}

div.tablefull>div>div {
    display: table-cell;
    height: 100%;
    padding: 0;
}

2016-09-09 13:22:06

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

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

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

2013-10-09 15:03:48

引导3两列全高

推荐文章

最新文章

标签