Twitter bootstrap Bootstrap 3.1可见xs和可见sm不能一起工作

我想在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，正如在类上所述，但结果是sm类

display:none！重要信息

正在覆盖xs

显示：块！重要信息

当您在浏览器上转到xs大小时

---

我试图在引导文档中找到答案，但它们只有一个表，没有解释如何在同一个分区上使用多个可见性参数。

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

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

如果要以多种大小显示它，请不要使用

可见-*

，而是使用

隐藏-*

隐藏不需要的其他大小。

---

在这种情况下：

hidden md hidden lg

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

`.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 visible-sm">
   <a href="#">Item 1</a>
   <a href="#">Item 2</a>
   <a href="#">Item 3</a>
</div>

---

继续做好工作：）

引导与指定宽度以上的类一起工作。例如，如果您将

col-sm-4

，这只会强制它为4列宽的sm宽度和更宽的sm宽度

在您的情况下，一个简单的

class=“col-xs-4 hidden md hidden lg”

应该足以得到您想要的解决方案

第一个解决方案不起作用的原因是您在

可见sm

之前指定了

可见xs

。这会将sm类强加于其上，使其在xs宽度上不可见。因为这是在股票引导css中指定的

---

编辑：对于那些正在使用Bootstrap 4的人来说，这可以通过使用

class=“col-4 d-md-none”

来实现。您是否尝试过使用

hidden md hidden lg

的另一种方法？我现在会尝试，因为我没有。对我来说，这看起来像某种bug，至少在这种行为背后有一个原因。这不是bug，这是预期的行为。这在JuriRobl奏效了。如果你把它作为答案，我会很高兴，这样我就可以把它标记为选中。谢谢@azeós我在哪里可以看出这是一种有意的行为？。我在那个里读到的只是使用一个或多个可用类在视口断点之间切换内容。是的，这没关系，但我一直试图坚持使用引导网格。检查@Juri Robl comment，这可能就是你们要找的。是的@azeós，我现在正在检查。谢谢，你还和grid在一起。您只是为了自己的方便而覆盖现有的生存能力类。

display:normal

不存在，您只是给出了一个无效的规则，浏览器将回退到default。要澄清的是，发生的情况是，其中一个可见-*类正在强制“display:none！important”覆盖另一个类。只要媒体查询不匹配，它就会应用样式。当您使用“隐藏”时，它仅在没有副作用的情况下才适用。如果在引导中添加了另一个间隔会怎么样？然后每个网站都有错误的css。检查官方响应实用程序类，希望能帮助别人。