基于媒体查询应用 CSS 类

Question

我正在使用 Bootstrap 3。基于媒体查询应用不同 CSS 类的最佳方法是什么？当它是移动设备时，我需要应用 Bootstrap col-xs 类，但仅当它是桌面版本（md，lg）时才应用自定义 CSS 类。现在我有 2 个 div，一个基于媒体查询可见，但我不想因此而重复 DIV。

我知道我可以将 col-md 和 col-lg 应用于 DIV 并且我在很多地方都这样做，但这种情况不同。在移动设备中，我想应用 col-xs-2，但在桌面版本中，我需要让它表现得像一张桌子，所以我使用 display:table。

Answer 1

在 div 上使用 col-xs-2，并添加自定义媒体查询以在屏幕适合 col-lg-* 尺寸时进行。

例如你有这样的设置：

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 custom-lg-col">
           .....
       </div>
       .....
   </div>
</div>

然后你可以将其添加到你的样式文件中：

@media (min-width: 1200px) {
  .custom-lg-col {
    width:...;
    display:table;
    ......
  }
}

但您也可以保留 col-lg-2 并添加一个像这样的自定义类

<div class="container-fluid">
   <div class="row">
       <div class="col-xs-2 col-lg-2 only-desk-class">
           .....
       </div>
       .....
   </div>
</div>

风格：

@media (min-width: 1200px) {
  .only-desk-class {
    width:...;
    display:table;
    ......
  }
}

如果您不想更改 col-lg-* 默认样式，只需将您的自定义 div 应用于里面的内容即可。