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应该可以在移动屏幕上看到,900px宽度和更小.我使用Bootstrap类作为另一个div,.containerdiv并且到目前为止工作,但只有当我hidden-xs在我自己的移动CSS表中添加一个值时,就像这样;

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

该.mobileDIV应该会显示在屏幕上900px或更小,但它仍然没有.我不确定为什么它没有,display:block是正确的用法吗？添加visible-xs并且visible-sm什么都不做.

这样做的正确方法是什么,为什么我的版本不起作用？

Answer 1

你的.mobilediv有以下样式:

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

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

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

Answer 2

不需要CSS,可见类应该是这样的:visible-md-block不仅仅是visible-md代码应该像这样:

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

        </div>
    </div>
</div>

<div class="mobile hidden-md hidden-lg ">
    test
</div>

根本不需要额外的css.