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

Answer 2

只需将两个容器放在HTML中的同一级别：

<强> HTML

<div class="container hidden-xs">
    <div class="row">
        Hidden XS
    </div>
</div>
<div class="container visible-xs">
    <div class="row">
        Visible XS
    </div>
</div>

查看此工作Bootply。另外，正如您可以看到@ganders在评论中指出的那样，使用.visible-??和.hidden-??类可以轻松实现。（还有更多可读性。）相应的bootstrap-classes在bootstrap-docs中有很好的解释。

Answer 3

Bootstrap没有内置，因为这是一个相当小的用例。您必须编写一些自定义mixins（假设您经常遇到此问题）或修改它们在各个断点处的行为。

需要关于隐藏bootstrap div的建议

3 个答案: