猿问
下载APP

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

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


慕田峪7331174
浏览 47回答 3
3回答

慕码人8056858

在Bootstrap 4中,本机类可以生成全高列(DEMO),因为它们将网格系统更改为flexbox。(阅读Bootstrap 3)本机Bootstrap 3.0类不支持您描述的布局,但是,我们可以集成一些使用css表来实现此目的的自定义CSS 。Bootply演示 / Codepen标记:<header>Header</header><div class="container">&nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-3 no-float">Navigation</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-9 no-float">Content</div>&nbsp; &nbsp; </div></div>(相关)CSShtml,body,.container {&nbsp; &nbsp; height:100%;}.container {&nbsp; &nbsp; display:table;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin-top: -50px;&nbsp; &nbsp; padding: 50px 0 0 0; /*set left/right padding according to needs*/&nbsp; &nbsp; box-sizing: border-box;}.row {&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; display: table-row;}.row .no-float {&nbsp; display: table-cell;&nbsp; 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) {&nbsp; .row .no-float {&nbsp; &nbsp; &nbsp; display: table-cell;&nbsp; &nbsp; &nbsp; float: none;&nbsp; }}Codepen演示现在,对于较小的屏幕,列的行为将类似于默认的引导列(每个列都获得全宽)。3)如果所有屏幕宽度都需要1:3的比例 - 那么从标记中删除bootstrap的col-md- *类可能更好,因为这不是它们的使用方式。Codepen演示

开满天机

你可以通过这个padding-bottom: 100%; margin-bottom: -100%;技巧实现你想要的东西,你可以在这个小提琴中看到。我稍微改变了你的HTML,但你可以使用以下代码用自己的HTML实现相同的结果.col-md-9 {&nbsp; &nbsp; overflow: hidden;}.col-md-3 {&nbsp; &nbsp; padding-bottom: 100%;&nbsp; &nbsp; margin-bottom: -100%;}

烧仙草VB

纯CSS解决方案仅使用CSS2.1,可以使用所有浏览器(IE8 +),而无需指定任何高度或宽度。这意味着如果您的标题突然变长,或者您的左侧导航需要放大,则无需在CSS中修复任何内容。完全响应,简单,清晰,易于管理。<div class="Container">&nbsp; &nbsp; <div class="Header">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="HeightTaker">&nbsp; &nbsp; &nbsp; &nbsp; <div class="Wrapper">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="LeftNavigation">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="Content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>说明: 容器div占据身体的100%高度,并分为2个部分。标题部分将跨越其所需的高度,HeightTaker其余部分将采用。它是如何实现的?通过在容器旁边以100%高度(使用:before)浮动一个空元素,并HeightTaker在末尾给出一个空元素和清除规则(使用:after)。那个元素与浮动元素不在同一条线上,所以他被推到了最后。这正是文件的100%。由此我们将HeightTaker跨度设置为容器高度的其余部分,而没有说明任何特定的高度/边距。在内部,HeightTaker我们构建一个正常的浮动布局(以实现像显示一样的列),并进行微小的更改..我们有一个Wrapper元素,这是100%高度工作所需要的。更新这是使用Bootstrap类的Demo。(我刚给你的布局添加了一个div)
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答