在桌面上显示 1 行，在移动设备上显示 2 行答案

【问题标题】：Show 1 row on desktop and 2 rows on mobile在桌面上显示 1 行，在移动设备上显示 2 行
【发布时间】：2021-01-08 22:57:35
【问题描述】：

这个基本的引导 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>

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

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

【问题讨论】：

您可以一次组合多个类，以空格分隔。请参阅@niyasc 答案。

标签： css twitter-bootstrap

【解决方案1】：

您不必为较小的设备和较大的设备编写单独的代码。以下代码 sn-p 将满足您的目的。

<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>

【讨论】：

都显示出来了。但不同之处在于列的宽度取决于设备。并且 OP 正在尝试显示或隐藏该设备中的行。
是的。它们在较大的设备中显示为单行，在较小的设备中显示为两行。我认为这是 OP 所要求的。
@BhojendraNepal 来自 OP，您可以看到 desktop 和 mobile 容器的内容相同，因此 @niyasc 解决方案也很好。
@niyasc 你完全正确。重新阅读问题后，我发现您的答案是正确的。
非常感谢您的回答。这真的有效。我只是认为列的总和应该始终为 12，就像 col-md 一样。在你的情况下，col-xs 的总和是 24。所以是的，它有效，但我不知道它为什么有效。

【解决方案2】：

<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>

【讨论】：

重复以前接受的答案不是最好的主意。