Question

我已经开始使用新的alpha4 6，只是检查了一下，发生了什么变化。

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

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

我读到他们将花车更改为flexbox，没关系，我知道flexbox，但这个结果让我感到震惊。我认为这是一个有效的靴子布局。

我想念什么？也许我太累了，没有看到森林里的树木......

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

网格在bootstrap4 alpha-6 intresting行为

1 个答案: