Question

我在官方bootstrap网站上找到了以下代码段。我想知道它对平板电脑的作用。

<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似乎有12个部分和12个部分中的12个。但仅提到6个sm？剩下的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而得到宽度，并将落入下一行

没有提到sm的行为

1 个答案: