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像素，更小。我使用Bootstrap类作为另一个div，.containerdiv，到目前为止，但是只有当我在我自己的移动CSS工作表中添加hidden-xs的值时才这样做;

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

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

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

Answer 1

您的.mobile div上面有以下样式：

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

Answer 3

您的移动课程不正确：

.mobile {
  display: none !important;
  visibility: hidden !important; //This is what's keeping the div from showing, remove this.
}

Answer 4

如果你在css中给出display table属性，一些div bootstrap隐藏类将不会对该div

产生影响

Answer 5

截至2017年11月11日 Bootstrap v4 - beta

响应式实用程序

在v4.0.0中删除了所有@ screen-变量。使用media-breakpoint-up（），media-breakpoint-down（）或media-breakpoint-only（）Sass mixins或$ grid-breakpoints Sass map。

从v3中移除：.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg -inline .visible-lg-inline-block

从v4 alphas中删除：.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-LG-向下

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

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

5 个答案: