0

假设我有以下标记：

<div class="span6"></div>
<div class="span6"></div>

现在假设如果视口小于 600px，我想让 DIV 跨越整个容器，如下所示：

<div class="span12"></div>
<div class="span12"></div>

我的解决方案如下：

<div class="do-not-display-below-600px">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

<div class="do-not-display-above-600px">
    <div class="span12"></div>
    <div class="span12"></div>
</div>

并且只需do-not-display...使用媒体查询隐藏或显示类。

这是一个可怕的解决方案，因为它违反了“不要重复自己”的规则。假设我有 5 个断点，我必须为每个断点创建 5 个不同的容器。太丑了

所以我想知道是否有更优雅的解决方案？

PS：我意识到我可以使用 Bootstrap 的 LESS 混音器或 bootstrap-sass@include将混音器添加到我需要它们的每个类中，但是还有其他解决方案吗？

4

0 回答 0