Question

我正在玩Bootstrap 4，我正在尝试做一个非常直接的任务，一行2x col-xs-6。它将值推送到新行：S。

 <div class="row">
     <div class="col-xs-6 col-sm-6">
           hehe
     </div>
     <div class="col-xs-6 col-sm-6">
           hehe
     </div>
 </div>

我也试过但也没有运气。

 <div class="col-xs-12">
     <div class="col-xs-6 col-sm-6">
           hehe
     </div>
     <div class="col-xs-6 col-sm-6">
           hehe
     </div>
 </div>

而不是

|   6   |   6   |

我正在

|       12       |
|       12       |

他们应该工作吗？我错过了什么？

Answer 1

col-xs-*不再在bootstrap4中使用。只需使用col-6代替。

<div class="container">
 <div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
 </div>
</div>

http://v4-alpha.getbootstrap.com/examples/grid/

每一类课程都会向上扩展，这意味着如果您计划设置课程 xs和sm的宽度相同，只需要指定xs。

所以它可能有点混乱，因为文档仍然引用＆＃34; xs＆＃34;但这可能与断点有关。

Answer 2

<div class="col-...">的容器应为<div class="row">。

.row
  .col-xs-6
  .col-xs-6

以下是文档：
http://getbootstrap.com/css/#grid

2x col-xs-6进入新行而不是共享行

2 个答案: