不提sm的行为

Question

我在官方引导网站上找到了以下片段。我想知道它在平板电脑上表现如何。

<div class="row">
 <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
 <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

在上面的片段中，xs-12将占据一行，xs-6将占据下一行的一半。同样，md似乎有8部分，12部分中有4部分，而sm只提到6部分？剩下的6块呢?它的表现如何？第二个div会在继承sm-6的行中占据下半部分吗？

Answer 1

​

.red {
  background: red;
}
.green {
  background: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8 red">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4 green">.col-xs-6 .col-md-4</div>
  </div>

</div>

​

第二个div会因为col-xs-12而得到它的宽度，并将落在下一行。