css - 需要关于隐藏 bootstrap div 的建议

Question

这是我需要建议的代码示例:

<div class="container hidden-xs">
<div class="row hidden-xs">
    <div class="container hidden-sm hidden-md hidden-lg">
        <div class="row xtrastyle hidden-sm hidden-md hidden-lg">
            <div class="col-md-12">
            Test
            </div>
        </div>
    </div>
</div>

假设我想要一种类型的容器和行用于 xs 设备，一个容器和行用于其他设备。它不像这段代码那样工作。我需要一些技巧来让它发挥作用。

Answer 1

如果您想要具有不同样式的相同内容，请使用 css 媒体查询。

HTML:

<div class="container">
    <div class="row xtrastyle">
        <div class="col-md-12">
        Test
        </div>
    </div>
</div>

CSS:

@media (max-width: 768px) {
    .xtrastyle {
        // apply your xtra style here
        color: red;
    }
}

提示:如果你使用 LESS 而不是 CSS，你可以使用 bootstrap @screen-sm 变量而不是 768px:http://getbootstrap.com/css/#less