Question

我对boostrap的工作原理感到困惑，比如说我有以下的Div： -

<b class="hidden-sm">Your cart:</b>

所以这会隐藏Div是屏幕很小，但是这个效果也适用于屏幕超小-xs

第二个问题是我有这个Div： -

<b class="visible-sm">cart:</b>

这意味着当屏幕很小时会显示div，但是当屏幕很大时它会显示吗？

任何人都可以请求，管理这个的规则是什么？

Answer 1

是的。

简单地说，管理规则是：

如果您说hidden-*，那么它将仅隐藏在该设备宽度。
如果你说visible-*，它只会在设备宽度上显示。
如果您希望将其应用于多个设备指示符，则必须使用多个设备指示符（xs，sm，md，lg）。

Answer 2

您可能需要阅读源代码才能了解Twitter Bootstrap的真正工作原理。在这种情况下，那将是CSS文件bootstrap.css（这里的JavaScript无关紧要）。它包含：

@media (min-width: 768px) and (max-width: 991px) {
  .hidden-sm {
    display: none !important;
  }
}

这是类hidden-sm最重要的事情：如果视口宽度为768 ... 991像素，它只是从显示中删除元素。所以它不会影响“超小”视口。要覆盖它们，您需要编码

<b class="hidden-sm hidden-xs">Your cart:</b>

像visible-sm这样的类更复杂。对于他们，代码首先设置display: none，然后设置选定的@media限制display: block。因此，与上述类似，为了覆盖“超小”，您需要使用

class="visible-sm visible-xs"

但还有一个问题是，当这些类中的元素可见时，由于使用了CSS技术，它们会显示为块。这意味着，如果您有xxx <b class="visible-sm visible-xs">yyy</b> zzz，那么当视口很大时，它将显示为“xxx zzz”，但是在视频的每一行上都显示为“xxx”，“yyy”和“zzz”如果它是“小”或“超小”，则拥有（和“yyy”以粗体显示）。

这些类旨在用于块，通常用于div元素，而不是内联标记，例如b或span。

如果屏幕是xs </b>，<b class =“hidden-sm”>也会隐藏

2 个答案: