Question

我想在sm和xs设备上显示div，它看起来像这样：

<div class="col-xs-4 col-sm-4 visible-xs visible-sm">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

我的引导程序是从cdn加载而没有任何自定义。

这应该在类上声明的xs和sm上显示这个div，但结果是当你在浏览器上转到xs size时，sm类display:none !important会覆盖xs display:block !important。 / p>

我试图找出bootstrap文档，但是他们只有一个表没有解释如何在同一个div上使用多个可见性参数。

Answer 1

如果您想以多种尺寸展示它，请不要使用visible-*，而是使用hidden-*隐藏其他不需要的尺寸。在这种情况下：hidden-md hidden-lg

Answer 2

当我遇到这样的问题时，我只想使用自己的自定义媒体查询来操纵元素的可见性。

.someclass{
    display: none;
}

@media (max-width: 992px) {
   .someclass{
      display: normal!important;
   }
}

或者如果您想重复使用它，请定义一个自定义类，例如：

.visible-tablet-mobile{
    display: none;
}

@media (max-width: 992px) {
   .visible-tablet-mobile{
        display: normal!important;
   }
}

并重新使用它，而不是一次给你的div两个可见性类。

Answer 3

您必须添加以下值：

`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`

在这种情况下，您将拥有以下内容：

<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">

保持良好的工作：）

Answer 4

Bootstraps适用于来自指定width-class及更高版本的类。例如，如果您放置col-sm-4，这只会强制它为宽度为4列宽且宽度更宽。

在您的情况下，简单的class="col-xs-4 hidden-md hidden-lg"应足以获得所需的解决方案。

您的第一个解决方案不起作用的原因是您在visible-xs之前指定了visible-sm。这会迫使sm类进入它，使其在xs-width上不可见。因为这是在股票bootstrap css。

中指定的

编辑：对于那些使用Bootstrap 4的人来说，只需class="col-4 d-md-none"

即可实现