首頁猿問缺失可見-*和隱藏-*在Boots...

缺失可見-和隱藏-在Bootstrap v4中

源碼算法與數(shù)據(jù)結(jié)構(gòu)

POPMUISE 2019-07-08 15:11:30

缺失可見-*和隱藏-*在Bootstrap v4中在引導(dǎo)程序v3中，我經(jīng)常使用隱藏的-*類與Clearfix相結(jié)合來控制不同屏幕寬度的多列布局。例如,我可以在一個DIV中組合多個隱藏*，以使我的多列在不同的屏幕寬度上正確顯示。舉個例子，如果我想在大屏幕上顯示4行產(chǎn)品照片，在小屏幕上顯示3行，那么在非常小的屏幕上顯示2行。產(chǎn)品照片可能是不同的高度，所以我需要清除，以確保行正確地分開。這是第3節(jié)中的一個例子.。http://jsbin.com/tosebayode/edit?html，css，輸出既然v4已經(jīng)取消了這些類，并將它們替換為可見/隱藏的-*-向上/向下類，我似乎不得不使用多個div來做同樣的事情。在V4中有一個類似的例子.。http://jsbin.com/sagowihowa/edit?html，css，輸出因此，我從單個div到必須添加多個div和許多上下類來實現(xiàn)相同的目標(biāo)。從.。<div class="clearfix visible-xs-block visible-sm-block"></div>敬.。<div class="clearfix hidden-sm-up"></div><div class="clearfix hidden-md-up hidden-xs-down"></div><div class="clearfix hidden-md-down"></div>有什么更好的方法在V4中這樣做，我忽略了嗎？

查看完整描述

3 回答

30秒到達(dá)戰(zhàn)場

TA貢獻(xiàn)1828條經(jīng)驗獲得超6個贊

Bootstrap 4更新

這個hidden-*和visible-*班不再存在如果要隱藏啟動4中特定層或斷點上的元素，請使用d-*顯示類因此。

記得那個超小的/移動的(以前的)xs)是默認(rèn)(隱含的)斷點，除非被更大斷點。因此，這個-xsInfix不再存在于Bootstrap 4中.

顯示/隱藏斷點和下降:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down
(n/a 3.x)=
d-none
(與
hidden)

顯示/隱藏斷點和向上:

hidden-xs-up = d-none
(與
hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up
(n/a 3.x)=
d-xl-none

顯示/隱藏只適用于一個斷點:

hidden-xs
(僅)=
d-none d-sm-block
(與
hidden-xs-down)
hidden-sm
(僅)=
d-block d-sm-none d-md-block
hidden-md
(僅)=
d-block d-md-none d-lg-block
hidden-lg
(僅)=
d-block d-lg-none d-xl-block
hidden-xl
(n/a 3.x)=
d-block d-xl-none
visible-xs
(僅)=
d-block d-sm-none
visible-sm
(僅)=
d-none d-sm-block d-md-none
visible-md
(僅)=
d-none d-md-block d-lg-none
visible-lg
(僅)=
d-none d-lg-block d-xl-none
visible-xl
(n/a 3.x)=
d-none d-xl-block

引導(dǎo)4中響應(yīng)性顯示類的演示

還有，請注意d-*-block可以用d-*-inline, d-*-flex, d-*-table-cell, d-*-table等等.。取決于元素的顯示類型。閱讀更多關(guān)于顯示類

反對回復(fù) 2019-07-08

慕尼黑的夜晚無繁華

TA貢獻(xiàn)1864條經(jīng)驗獲得超6個贊

我不認(rèn)為多重div是一個很好的解決方案。

我也認(rèn)為你可以代替.visible-sm-block帶著.hidden-xs-down和.hidden-md-up(或.hidden-sm-down和.hidden-lg-up若要對相同的媒體查詢執(zhí)行操作，請執(zhí)行以下操作。

hidden-sm-up匯編成：

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

.hidden-sm-down和.hidden-lg-up匯編成：

@media (max-width: 768px) {
  .hidden-xs-down {
    display: none !important;
  }}@media (min-width: 991px) {
  .hidden-lg-up {
    display: none !important;
  }}

兩種情況都應(yīng)采取同樣的行動。

當(dāng)你試圖替換.visible-sm-block和.visible-lg-block..引導(dǎo)v4文檔告訴您：

這些類并不試圖適應(yīng)不太常見的情況，在這種情況下，元素的可見性不能表示為一個連續(xù)的視口斷點大小范圍；相反，您需要在這種情況下使用自定義CSS。

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

反對回復(fù) 2019-07-08