在桌面上显示1行,在移动设备上显示2行

Question

这个基本的bootstrap CSS在1行显示了4列:

<div class="row">
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
    <div class="col-md-3">
        Text
    </div>
</div>

对于移动视图,我想在2行上显示2列.我知道如何做到这一点的唯一方法是两次创建相同的内容......这样的事情:

<div class="desktop">
    <div class="row">
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
        <div class="col-md-3">
            Text
        </div>
    </div>
</div>

<div class="mobile">
    <div class="row">
        <div class="col-xs-6">
            Text
        </div>
        <div class="col-xs-6">
            Text
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            Text
        </div>
        <div class="col-xs-6">
            Text
        </div>
    </div>
</div>

所以你可以display:none使用@media... 设置桌面和移动类.

这可行,但它不是最干净的解决方案.还有其他办法吗？

Answer 1

您不必为较小的设备和较大的设备编写单独的代码.以下代码段将满足您的目的.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-3 col-xs-6">
    1
  </div>
  <div class="col-md-3 col-xs-6">
    2
  </div>
  <div class="col-md-3 col-xs-6">
    3
  </div>
  <div class="col-md-3 col-xs-6">
    4
  </div>
</div>