Question

我正在尝试使用bootstrap网格来显示4个响应列：

[] [] [] []

但是在移动设备上，我希望它看起来如下：

[] []
[] []

但是当我使用该列时，我最终会在移动设备上获得以下内容：

[]
[]
[]
[]

如何修复它以使其2 x 2？我最初使用的是＆＃34; col-md-4＆＃34;但这不成功，所以我尝试在类

中做两个列

见下文：这款手机上有1 x 4格式，但平板电脑上有2 x 2格式

<div class="row">
<div class="col-sm-6 col-lg-3">
    This is option 1.
</div>
<div class="col-sm-6 col-lg-3">
    This is option 2.
</div>
<div class="col-sm-6 col-lg-3">
    This is option 3.
</div>    
<div class="col-sm-6 col-lg-3">
    This is option 4.
</div>

Answer 1

试试这个

<div class="row">

<div class="col-xs-6 col-sm-3">
    This is option 1.
</div>
<div class="col-xs-6 col-sm-3">
    This is option 2.
</div>
<div class="col-xs-6 col-sm-3">
    This is option 3.
</div>    
<div class="col-xs-6 col-sm-3">
    This is option 4.
</div>  

 </div>

如何在移动设备上获得4个响应列？

1 个答案: