將<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

回答

相關問題