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

这是使用引导程序来更改行中元素数量的正确方法

1 个答案: