将<B类=“隐藏SM”>也隐藏如果屏幕是xs

我得到了怎样的自举的作品，比如让说，我有以下股利困惑： -将<B类=“隐藏SM”>也隐藏如果屏幕是xs

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

所以这将隐藏在div是屏幕小，但是确实这个效果还应用在屏幕的超小型-xs

第二个问题是，我有这个div： -

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

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

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

来源

2014-10-08 john G

你为什么不试试:-) http://quirktools.com/screenfly/ – DanFromGermany 2014-10-08 23:30:26

@DanFromGermany我可以试试这个,,但我询问支配这个规则.. – 2014-10-08 23:39:07

请不要使用“bootstrap”标签，使用“twitter-bootstrap”，因为它意味着别的 – 2014-10-12 09:59:03

是的。

简而言之，管理规则是：

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

来源

2014-10-11 03:13:19

您可能需要阅读源代码以了解Twitter Bootstrap的真实功能。在这种情况下，这将是CSS文件bootstrap.css（这里JavaScript不相关）。它包含：

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

这是类hidden-sm唯一重要的东西：它简单地从显示器移除元素，如果视口宽度为768个... 991个像素。所以它不会影响“超小”视口。为了掩盖他们为好，你就需要像visible-sm更为复杂的代码

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

类。对于他们来说，代码首先设置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。

来源

2014-10-09 06:30:53

所以我可以说可见和隐藏可以返回true或false，只取决于屏幕大小？例如visible-sm将检查屏幕是否很小并且会显示标记，但是如果屏幕是xs或大，那么visible-sm将返回false并且不会显示标记？ – 2014-10-09 10:05:52

@johnG，效果取决于* viewport width *。类不是真的或假的;相反，属于像'visible-sm'这样的类的元素由于该类可能会应用一些CSS规则，这意味着该元素将被删除，除非视口宽度处于特定范围内。这确实意味着如果该宽度处于“超小”范围内，则不显示，除非元素*也*属于“visible-xs”类。 – 2014-10-09 11:41:41

但我的意思是默认实现将工作，因为我提到（真，假）这是正确的？ – 2014-10-09 12:26:44

将<B类=“隐藏SM”>也隐藏如果屏幕是xs

回答

相关问题