Bootstrap 3 两列全高 [英] Bootstrap 3 two columns full height

问题描述

我正在尝试使用 Twitter Bootstrap 3 制作两列全高布局.似乎 Twitter Bootstrap 3 不支持全高布局.我想做什么:

 +-------------------------------------------------+|标题 |+------------+------------------------------------+|||||||导航 |内容 |||||||||||||||||||+------------+------------------------------------+

如果内容增长，nav 也应该增长.

• 对于每个父级的高度 100% 不起作用，因为存在内容为一行的情况.
• position: absolute 似乎是错误的方式.
• display: table 和 display: table-cell 解决了问题，但不够优雅.

HTML:

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

有没有办法使用默认的 Twitter Bootstrap 3 类来实现它?

解决方案

在 Bootstrap 4 中，本机类可以生成全高列(DEMO) 因为他们改变了 他们的网格系统 到 flexbox.(继续阅读 Bootstrap 3)<小时>本机 Bootstrap 3.0 类不支持您描述的布局，但是，我们可以集成一些使用 css 表格 来实现这一点.

Bootply 演示/Codepen

标记:

Header
<div class="容器"><div class="row"><div class="col-md-3 no-float">导航</div><div class="col-md-9 no-float">内容</div>

(相关)CSS

html,body,.container {高度:100%；}.容器 {显示:表；宽度:100%；边距顶部:-50px；填充:50px 0 0 0；/*根据需要设置左/右填充*/box-sizing: 边框框；}.排 {高度:100%；显示:表格行；}.row .no-float {显示:表格单元格；浮动:无；}

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

注意:

1) 为了不弄乱引导程序的本机列类，我们在标记中添加了另一个类，例如 no-float 并且只设置 display:table-cell 和 float:none 在这个类上(与列类本身相关).

2) 如果我们只想将 css-table 代码用于特定的断点(例如中等屏幕宽度及以上)，但对于移动屏幕，我们希望默认返回到通常的引导程序我们可以将自定义 CSS 包装在媒体查询中的行为，例如:

@media(最小宽度:992px){.row .no-float {显示:表格单元格；浮动:无；}}

Codepen 演示

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

3) 如果所有屏幕宽度都需要 1:3 的比例 - 那么最好从标记中删除引导程序的 col-md-* 类，因为这不是它们的本意使用.

Codepen 演示

I'm trying to make a two-column full-height layout with Twitter Bootstrap 3. It seems that Twitter Bootstrap 3 does not support full height layouts. What I want to do:

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

If the content grows, the nav should also grow.

• Height 100% for every parent doesn't work because there is the case where content is one line.
• position: absolute seems to be the wrong way.
• display: table and display: table-cell solves the problem, but not elegantly.

HTML:

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

Is there way to make it with default Twitter Bootstrap 3 classes?

解决方案

Edit: In Bootstrap 4, native classes can produce full-height columns (DEMO) because they changed their grid system to flexbox. (Read on for Bootstrap 3)

---

The native Bootstrap 3.0 classes don't support the layout that you describe, however, we can integrate some custom CSS which make use of css tables to achieve this.

Bootply demo / Codepen

Markup:

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

(Relevant) 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;
}

The above code will achieve full-height columns (due to the custom css-table properties which we added) and with ratio 1:3 (Navigation:Content) for medium screen widths and above - (due to bootstrap's default classes: col-md-3 and col-md-9)

NB:

1) In order not to mess up bootstrap's native column classes we add another class like no-float in the markup and only set display:table-cell and float:none on this class (as apposed to the column classes themselves).

2) If we only want to use the css-table code for a specific break-point (say medium screen widths and above) but for mobile screens we want to default back to the usual bootstrap behavior than we can wrap our custom CSS within a media query, say:

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

Codepen demo

Now, for smaller screens, the columns will behave like default bootstrap columns (each getting full width).

3) If the 1:3 ratio is necessary for all screen widths - then it's probably a better to remove bootstrap's col-md-* classes from the markup because that's not how they are meant to be used.

Codepen demo

这篇关于Bootstrap 3 两列全高的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！