css - 在桌面上显示 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>

对于移动 View ，我想在 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>

因此您可以使用 @media 为桌面和移动类设置 display:none ...

这可行，但不是最干净的解决方案。是否有其他方法可以做到这一点？

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>