twitter-bootstrap Bootstrap 3.1 可见 xs 和可见 sm 不能一起工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21667100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 3.1 visible-xs and visible-sm not working together
提问by Jaypee
I have a div that I want to show on sm and xs devices, it looks like this:
我有一个想要在 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>
My bootstrap is loading from cdn without any customization.
我的引导程序是从 cdn 加载的，没有任何自定义。
This is supposed to show this div on xs and sm as stated on classes but the result is the sm class display:none !importantis overriding the xs display:block !importantwhen you go to xs size on the browser.
这应该按照类中的说明在 xs 和 sm 上显示此 div，但结果是当您在浏览器上转到 xs 大小时，sm 类display:none !important会覆盖 xs display:block !important。
I tried to find out on bootstrap documentation but they only have a table that is not explaining how to use multiple visibility parameters on the same div.
我试图在 bootstrap 文档中找到，但他们只有一个表格，没有解释如何在同一个 div 上使用多个可见性参数。
回答by Juri Robl
If you want to show it at multiple sizes, don't use visible-*but instead hide the other sizes you don't want with hidden-*.
In this case: hidden-md hidden-lg
如果您想以多种尺寸显示它，请不要使用visible-*，而是使用隐藏您不想要的其他尺寸hidden-*。在这种情况下：hidden-md hidden-lg
回答by Zafar
When I face issues like this, I would simply prefer to use my own custom media query to manipulate the visibility of an element.
当我遇到这样的问题时，我更愿意使用我自己的自定义媒体查询来操纵元素的可见性。
.someclass{
display: none;
}
@media (max-width: 992px) {
.someclass{
display: normal!important;
}
}
Or if you want to re-use this, then define a custom class such as:
或者，如果您想重新使用它，则定义一个自定义类，例如：
.visible-tablet-mobile{
display: none;
}
@media (max-width: 992px) {
.visible-tablet-mobile{
display: normal!important;
}
}
and re-use it instead of giving your div two visibility classes at a time.
并重新使用它，而不是一次给你的 div 两个可见性类。
回答by user1789975
You must add one value from:
您必须从以下位置添加一个值：
`.visible-*-block` for `display: block;`
`.visible-*-inline` for `display: inline;`
`.visible-*-inline-block` for `display: inline-block;`
In this case you will have something like this:
在这种情况下，您将有这样的事情：
<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">
<div class="col-xs-4 col-sm-4 visible-xs-block visible-sm-block">
Keep up the good work :)
保持良好的工作 ：）
回答by Thomas Scheffer
Bootstraps works with classes that go from the specified width-class and up. For example if you put col-sm-4, this simply forces it to be 4 columns wide for the sm-width and wider.
Bootstraps 适用于从指定宽度类开始的类。例如，如果你把col-sm-4，这只是强制它为 sm-width 和更宽的 4 列宽。
In your case a simple class="col-xs-4 hidden-md hidden-lg"should be enough to get your desired solution.
在您的情况下，一个简单的class="col-xs-4 hidden-md hidden-lg"应该足以获得您想要的解决方案。
The reason your first solution didn't work, is that you specified visible-xsbefore visible-sm. Which forces the sm class onto it, making it invisible on the xs-width. As this is specified in the stock bootstrap css.
您的第一个解决方案不起作用的原因是您visible-xs之前指定了visible-sm. 这迫使 sm 类到它上面，使它在 xs-width 上不可见。因为这是在库存引导程序 css 中指定的。
Edit: For those who are using Bootstrap 4 this could be achieved with just class="col-4 d-md-none"
编辑：对于那些使用 Bootstrap 4 的人来说，这可以通过 class="col-4 d-md-none"
