引导程序 4 alpha-6 中的网格有趣行为

Question

我已经开始使用新的 alpha4 6 并且刚刚检查了有什么变化。

如我所见，我可以像 3 中那样使用容器、行、列。

所以我刚刚设置了一个非常简单的布局，content > row > col（想用作容器来添加我的额外设置），其中一行和两列。结果很糟糕：https://jsfiddle.net/34prcdou/1/

我看他们把float改成了flexbox，没关系，我知道flexbox，但是这个结果让我很震惊。我认为这是一个有效的 bootsrap 布局。

我想念什么？可能是我太累了，只见树木不见森林...

HTML

<div class="container">
  <div class="row">
    <div class="col-xs-12" id="content">
      <div class="row">
        <div class="col-sm-6 color-1" style="height: 100%">a</div>
        <div class="col-sm-6 color-2" style="height: 100%">a</div>
      </div>
    </div>
  </div>
</div>

CSS

html {height: 100%;}
body {height: 100%;}

.container:first-child {margin: 0 auto; height: 100%;}
.container:first-child {
    -webkit-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
    box-shadow: inset 0px 0px 17px 6px rgba(0,0,0,0.75);
}

#content {border: 1px solid #f00}

.color-1 {background: #CEE5F2}
.color-2 {background: #ACCBE1}
.color-3 {background: #7C98B3}
.color-4 {background: #637081}
.color-5 {background: #536B78}

Answer 1

在 Bootstrap 4 Alpha 6 中，-xs- 中缀已被删除。对于全宽列，请使用 col-12 而不是 col-xs-12

<div class="container">
  <div class="row">
    <div class="col-12" id="content">
      <div class="row">
        <div class="col-sm-6 color-1" style="height: 100%">a</div>
        <div class="col-sm-6 color-2" style="height: 100%">a</div>
      </div>
    </div>
  </div>
</div>

http://www.codeply.com/go/eiQNFNEZXJ

引导程序 4 alpha-6 中的网格有趣行为

Grid in bootstrap4 alpha-6 intresting behaviour

css

twitter-bootstrap-4

bootstrap-4