Question

我在我的网站上使用bootstrap，我有几个div，如下面

 <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
           <div id="item1" class="col-sm-6">
              some content
           </div>
           <div id="item2" class="col-sm-6">
              some content
           </div>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-12 col-lg-12">
           <div id="item3" class="col-sm-6">
              some content
           </div>
           <div id="item4" class="col-sm-6">
              some content
           </div>
      </div>
 </div>

我的代码示例上面错了，或者我不需要在这里提问。当屏幕是md或更大时，我希望项目的内容显示如下

item1 item2 item3 item4

这些项目只是在一行中穿过屏幕，这很容易做到。现在当我希望它在屏幕尺寸为sm或xs

时执行以下操作

item1 item2
item3 item4

Answer 1

要获得所需的类，请将12除以您想要获得的列数：

对于4列，12/4 = 3 - >例如col-md-3 col-lg-3

对于2列，12/2 = 6 - >例如col-xs-6 col-sm-6

注意：这适用于遍历整个页面的行，而不适用于嵌套在其他列中的元素。在下面的代码中，我删除了外部行和“Item”容器之间的元素。

<div class="row">
       <div id="item1" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content
       </div>
       <div id="item2" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content
       </div>
       <div id="item3" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content
       </div>
       <div id="item4" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content
       </div>
</div>

Answer 2

也许只是：

<div class="row">
       <div id="item1" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content 1
       </div>
       <div id="item2" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content 2
       </div>
       <div id="item3" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content 3
       </div>
       <div id="item4" class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
          some content 4
       </div>
</div>

当屏幕变小时，我该如何进入列

2 个答案: