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

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

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

Answer 1

Bootstraps 适用于从指定宽度类及以上的类。例如，如果您输入col-sm-4，这只会强制它为 4 列宽（对于 sm 宽度和更宽）。

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

您的第一个解决方案不起作用的原因是您在visible-sm 之前指定了visible-xs。这将 sm 类强制到它上面，使其在 xs 宽度上不可见。因为这是在 stock bootstrap css 中指定的。

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

Answer 2

您必须从以下位置添加一个值：

`.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 3

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

Answer 4

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

.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 提供两个可见性类。