Bootstrap 3.1 可见 xs 和可见 sm 不能一起工作 [英] Bootstrap 3.1 visible-xs and visible-sm not working together

问题描述

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

<a href="#">项目 1</a><a href="#">项目 2</a><a href="#">项目 3</a>

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

这应该按照类上的说明在 xs 和 sm 上显示此 div，但结果是 sm 类 display:none !important 覆盖了 xs display:block !important 当您在浏览器上转到 xs 大小时.

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

解决方案

如果你想以多种尺寸显示它，不要使用 visible-* 而是隐藏你不需要的其他尺寸'不想要 hidden-*.在这种情况下:hidden-md hidden-lg

I have a div that I want to show on sm and xs devices, it looks like this:

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

This is supposed to show this div on xs and sm as stated on classes but the result is the sm class display:none !important is overriding the xs display:block !important when you go to xs size on the browser.

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.

解决方案

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

这篇关于Bootstrap 3.1 可见 xs 和可见 sm 不能一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！