这是使用bootstrap更改行中元素数量的正确方法吗

Question

我有一个包含4个元素的表单。在小型设备和所有大型设备上，我希望在一行中显示所有4个元素。在一个超小型设备上，我想将它们显示在两行中，每行两个元素。在伪代码中，我的HTML看起来像

form-group form-group-xs form-group-sm
    xs-5 sm-3 elem1
    xs-7 sm-3 elem2
    xs-5 sm-3 elem3
    xs-7 sm-3 elem4
end form-groups

这是可行的，但在我看来，这不是Bootstrap设计的工作方式。我对它的问题是，它依赖于包装将elem3和elem4放在第2行。

这是使用bootstrap来实现目标的正确方式吗？

Answer 1

基于12列轴网系统，您希望代码看起来如下所示：

<div class="row">
  <div class="col-xs-6 col-sm-3">element 1</div>
  <div class="col-xs-6 col-sm-3">element 2</div>
  <div class="col-xs-6 col-sm-3">element 3</div>
  <div class="col-xs-6 col-sm-3">element 4</div>
</div>

看一下下面的例子：http://getbootstrap.com/css/#grid-example-mixed-complete