Twitter bootstrap 3两列全高

Question

我正在尝试使用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>

有没有办法使用默认的twitter bootstrap 3类？

Answer 1

编辑: 在Bootstrap 4中,本机类可以生成全高列(DEMO),因为它们将网格系统更改为flexbox.(阅读Bootstrap 3)

本机Bootstrap 3.0类不支持您描述的布局,但是,我们可以集成一些使用css表来实现此目的的自定义CSS .

Bootply演示 / Codepen

标记:

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(相关)CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

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

.row .no-float {
  display: table-cell;
  float: none;
}

上面的代码将实现全高列(由于我们添加的自定义css表属性)和中等屏幕宽度及以上的比例1:3(导航:内容)- (由于bootstrap的默认类:col-md -3和col-md-9)

注意:

1)为了不弄乱引导的原生柱类,我们添加其他类一样no-float的标记和只设置display:table-cell和float:none这个类(如并列到列类本身).

2)如果我们只想将css-table代码用于特定的断点(比如中等屏幕宽度和更高),但对于移动屏幕,我们希望默认回到通常的引导行为,而不是将我们的自定义CSS包装在一个媒体查询,说:

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Codepen演示

现在,对于较小的屏幕,列的行为将类似于默认的引导列(每个列都获得全宽).

3)如果所有屏幕宽度都需要1:3的比例 - 那么从标记中删除bootstrap的col-md-*类可能更好,因为这不是它们的使用方式.

Codepen演示

Answer 2

你可以通过这个padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的东西,你可以在这个小提琴中看到.

我稍微改变了你的HTML,但你可以使用以下代码用自己的HTML实现相同的结果

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

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

Answer 3

纯CSS解决方案

工作小提琴

仅使用CSS2.1,可以使用所有浏览器(IE8 +),而无需指定任何高度或宽度.

这意味着如果您的标题突然变长,或者您的左侧导航需要放大,则无需在CSS中修复任何内容.

完全响应,简单,清晰,易于管理.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

说明: 容器div占据身体的100%高度,并分为2个部分.标题部分将跨越其所需的高度,HeightTaker其余部分将采用.它是如何实现的？通过在容器旁边以100%高度(使用:before)浮动一个空元素,并HeightTaker在末尾给出一个空元素和清除规则(使用:after).那个元素与浮动元素不在同一条线上,所以他被推到了最后.这正是文件的100%.

由此我们将HeightTaker跨度设置为容器高度的其余部分,而没有说明任何特定的高度/边距.

在内部,HeightTaker我们构建一个正常的浮动布局(以实现像显示一样的列),并进行微小的更改..我们有一个Wrapper元素,这是100%高度工作所需要的.

更新

这是使用Bootstrap类的Demo.(我刚给你的布局添加了一个div)

Answer 4

我想到了一个微妙的变化,它不会改变默认的引导行为.我只有在需要它时才能使用它:

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

Answer 5

据我所知,您最多可以使用5种方法来完成此任务:

1. 使用CSS显示表/表格单元属性或使用实际表.
2. 在包装器中使用绝对定位元素.
3. 使用Flexbox显示属性,但截至今天,它仍然有部分支持
4. 使用仿色柱技术模拟完整的色谱柱高度.
5. 使用填充/边距技术.见例子.

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

Answer 6

纯CSS解决方案很简单,就像魅力十字浏览器一样.

您只需在nav和content列中添加一个大的填充和一个同样大的负边距,然后将它们的行包装在隐藏溢出的类中.
实时视图
编辑视图

HTML

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

祝好运!

Answer 7

解决方案可以通过两种方式实现

1. 使用display:table和display:table-cell
2. 使用填充和负边距.

在bootstrap 3中没有提供用于获得上述解决方案的类.display:table和display:table-cell,但仅限于在HTML中使用表时.负边距和填充类也不存在.

因此我们必须使用自定义css来实现这一目标.

以下是第一个解决方案

HTML代码:

<div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row tablewrapper">
    <div class="col-md-12 tablerowwrapper">
        <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content">
            <div class="col-md-12">
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div>
    </div>
  </div>

</div>

相应的css:

html,body,.container{
        height:100%;
    }
    .tablewrapper{
        display:table;
        height:100%;
    }
    .tablerowwrapper{
        display:table-row;
    }
    .sidebar,.content{
        display:table-cell;
        height:100%;
        border: 1px solid black;
        float:none;
    }
    .pad_top15{
        padding-top:15px;
    }

以下是第二种解决方案

HTML代码:

 <div class="container">
  <div class="row">
    <div class="col-md-12">
        <div class="page-header">
            <h3>Page-Header</h3>
        </div>
    </div>
  </div>
  <div class="row ovfhidden bord_bot height100p">
    <div class="col-md-3 sidebar pad_top15">
            <ul class="nav nav-pills nav-stacked">
                <li class="active"><a href="#">Submenuone</a></li>
                <li><a href="#">Submenutwo</a></li>
                <li><a href="#">Submenuthree</a></li>
            </ul>
        </div>
        <div class="col-md-9 content pad_top15">
            <div class="col-md-12">

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>

                <div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div><div class="col-md-12">
                    <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
                    </p>
                </div>
            </div>
        </div> 
  </div>

</div>

相应的css:

html,body,.container{
        height:100%;
    }
    .sidebar,.content{
        /*display:table-cell;
        height:100%;*/
        border: 1px solid black;
        padding-bottom:8000px;
        margin-bottom:-8000px;
    }
    .ovfhidden{
        overflow:hidden;
    }
    .pad_top15{
        padding-top:15px;
    }
    .bord_bot{
        border-bottom: 1px solid black;
    }

Answer 8

现代且非常简单的解决方案：

HTML：

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

CSS：

.row{
    display: flex;
}