Grid in bootstrap4 alpha-6 intresting behaviour

问题

I've started to use the new alpha4 6 and just checked, what changed.

As I see, I can use containers, rows, columns as in 3.

So I've just set up a really simple layout, a content > row > col (want to use as container to add my extra setup), a row in it and two columns. The result is terrible: https://jsfiddle.net/34prcdou/1/

I read that they changed the floats to flexbox, that's ok, I know flexbox, but this result is shocked me. This is a valid bootsrap layout I think.

What do I miss? Maybe I am too tired and not see the forest for the trees...

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}

回答1:

In Bootstrap 4 Alpha 6, the -xs- infix has been removed. For a full-width column use col-12 instead of 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

来源：https://stackoverflow.com/questions/42462902/grid-in-bootstrap4-alpha-6-intresting-behaviour

标签

css

bootstrap-4

twitter-bootstrap-4