html - Bootstrap 可见类和隐藏类无法正常工作

Question

我尝试使用 Bootstrap visible 和 hidden 类来创建仅在移动/桌面上可见的内容。我注意到这些类无法正常工作(而且我注意到很多人遇到了这个问题并通过这种方式解决了)所以我创建了一个移动样式表来设置要在移动设备上显示的 div。

这是我当前的代码:

<div class="containerdiv hidden-sm hidden-xs visible-md visible-lg">
  <div class="row">
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo">
    </div>
  </div>
</div>

<div class="mobile">
  test
</div>

现在 .mobile 应该在移动屏幕上可见，宽度为 900 像素，并且更小。我为另一个 div 使用了 Bootstrap 类，.containerdiv，到目前为止它仍然有效，但只有当我在我自己的移动 CSS 表中为 hidden-xs 添加值时, 像这样;

.hidden-xs {
  display:none !important;
}
.mobile {
  display:block !important;
}

.mobile div 现在应该显示在 900 像素或更小的屏幕上，但它仍然没有。我不确定为什么不这样做，display:block 是正确的使用方法吗？添加 visible-xs 和 visible-sm 什么都不做。

执行此操作的正确方法是什么？为什么我的版本不起作用？

Answer 1

您的 .mobile div 具有以下样式:

.mobile {
    display: none !important;
    visibility: hidden !important;
}

因此，除了用 block 覆盖 display 属性外，还需要用 visible 覆盖 visibility 属性.像这样:

.visible-sm {
    display: block !important;
    visibility: visible !important;
}