缺失可見-*和隱藏-*在Bootstrap v4中在引導程序v3中，我經常使用隱藏的-*類與Clearfix相結合來控制不同屏幕寬度的多列布局。例如,我可以在一個DIV中組合多個隱藏*，以使我的多列在不同的屏幕寬度上正確顯示。舉個例子，如果我想在大屏幕上顯示4行產品照片，在小屏幕上顯示3行，那么在非常小的屏幕上顯示2行。產品照片可能是不同的高度，所以我需要清除，以確保行正確地分開。這是第3節中的一個例子.。http://jsbin.com/tosebayode/edit?html，css，輸出既然v4已經取消了這些類，并將它們替換為可見/隱藏的-*-向上/向下類，我似乎不得不使用多個div來做同樣的事情。在V4中有一個類似的例子.。http://jsbin.com/sagowihowa/edit?html，css，輸出因此，我從單個div到必須添加多個div和許多上下類來實現相同的目標。從.。<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秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
Bootstrap 4更新
hidden-*visible-*d-*顯示類
xs-xs
hidden-xs-down (hidden-xs)=d-none d-sm-blockhidden-sm-down (hidden-sm hidden-xs)=d-none d-md-blockhidden-md-down (hidden-md hidden-sm hidden-xs)=d-none d-lg-blockhidden-lg-down=d-none d-xl-blockhidden-xl-down(n/a 3.x)= d-none(與 hidden)
hidden-xs-up=d-none(與 hidden)hidden-sm-up=d-sm-nonehidden-md-up=d-md-nonehidden-lg-up=d-lg-nonehidden-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-blockhidden-md(僅)= d-block d-md-none d-lg-blockhidden-lg(僅)= d-block d-lg-none d-xl-blockhidden-xl(n/a 3.x)= d-block d-xl-nonevisible-xs(僅)= d-block d-sm-nonevisible-sm(僅)= d-none d-sm-block d-md-nonevisible-md(僅)= d-none d-md-block d-lg-nonevisible-lg(僅)= d-none d-lg-block d-xl-nonevisible-xl(n/a 3.x)= d-none d-xl-block
還有，d-*-blockd-*-inline, d-*-flex, d-*-table-cell, d-*-table
慕尼黑的夜晚無繁華
TA貢獻1864條經驗 獲得超6個贊
.visible-sm-block.hidden-xs-down.hidden-md-up.hidden-sm-down.hidden-lg-up
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;
}}.visible-sm-block.visible-lg-block
這些類并不試圖適應不太常見的情況，在這種情況下，元素的可見性不能表示為一個連續的視口斷點大小范圍；相反，您需要在這種情況下使用自定義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;
}}添加回答
舉報
0/150
提交
取消