Bootstrap 3.1 visible-xs 和 visible-sm 不能一起工作

Question

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

<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 大小时，display:none !important sm 类将覆盖 xs display:block !important。

我试图在引导文档中找出答案，但他们只有一个表格，没有解释如何在同一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 适用于从指定宽度类开始及以上的类。例如，如果您输入 col-sm-4 ，这只会强制它为 sm-width 的 4 列宽和更宽。

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

您的第一个解决方案不起作用的原因是您在visible-sm之前指定了visible-xs。这会迫使 sm 类放在它上面，使其在 xs 宽度上不可见。因为这是在股票引导 css 中指定的。

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