在引导中缺少可见-**和隐藏-**

在Bootstrap v3中，我经常使用hidden-**类结合clearfix来控制不同屏幕宽度的多列布局。例如,

我可以在一个DIV中组合多个hidden-**，使我的多列在不同的屏幕宽度上正确显示。

举个例子，如果我想显示几行产品照片，在大屏幕上每行4张，在小屏幕上3张，然后在非常小的屏幕上2张。产品照片可能是不同的高度，所以我需要clearfix，以确保行中断适当。

这是v3中的一个例子…

http://jsbin.com/tosebayode/edit?html,css,output

现在v4已经删除了这些类，并将它们替换为可见/隐藏-** up/down类，我似乎必须用多个div来做同样的事情。

下面是v4中的一个类似的例子……

http://jsbin.com/sagowihowa/edit?html,css,output

所以我已经从单个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中有没有我忽略的更好的方法?

当前回答

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>

2020-06-04 14:03:25

其他回答

引导5更新(2021年)

引导5有一个新的xxl断点。因此，显示类有一个新的层来支持:

仅在xxl: d-xxl-none上隐藏仅在xxl: d-none d-xxl-block上可见

Bootstrap 4 (2018)

在Bootstrap 4中不再存在hidden-*和visible-*类。如果你想在Bootstrap 4中的特定层或断点上隐藏一个元素，请相应地使用d-* display类。

请记住，extra-small/mobile(以前是xs)是默认的(隐含的)断点，除非被更大的断点覆盖。因此，在Bootstrap 4中不再存在-xs中缀。

显示/隐藏断点和下:

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-x -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 (only) = d-none d-sm-block(与Hidden-xs -down相同) Hidden-sm (only) = d-block d-sm-none d-md-block Hidden-md (only) = d-block d-md-none d-lg-block Hidden-lg (only) = d-block d-lg-none d-xl-block Hidden-xl (n/a 3.x) = d-block d-xl-none Visible-xs (only) = d-block d-sm-none Visible-sm (only) = d-none d-sm-block d-md-none Visible-md (only) = d-none d-md-block d-lg-none Visible-lg (only) = d-none d-lg-block d-xl-none Visible-xl (n/a 3.x) = d-none d-xl-block

Bootstrap 4中响应式显示类的演示

另外，注意d-*-block可以替换为d-*-inline, d-*-flex, d-*-table-cell, d-*-table等。这取决于元素的显示类型。阅读更多关于显示类的信息

2017-08-23 16:04:16

http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

现在，您必须定义隐藏内容的大小

.hidden-xs-down

会对xs和更小的部分隐藏吗，只有xs

.hidden-xs-up

会隐藏一切

2016-02-11 22:56:26

i like the bootstrap3 style as the device width of bootstrap4
so i modify the css as below
<pre>
.visible-xs, .visible-sm, .visible-md, .visible-lg { display:none !important; }
.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block,
.visible-sm-block, .visible-sm-inline, .visible-sm-inline-block,
.visible-md-block, .visible-md-inline, .visible-md-inline-block,
.visible-lg-block, .visible-lg-inline, .visible-lg-inline-block { display:none !important; }
@media (max-width:575px) {
table.visible-xs                { display:table !important; }
tr.visible-xs                   { display:table-row !important; }
th.visible-xs, td.visible-xs    { display:table-cell !important; }

.visible-xs                 { display:block !important; }
.visible-xs-block { display:block !important; }
.visible-xs-inline { display:inline !important; }
.visible-xs-inline-block { display:inline-block !important; }
}

@media (min-width:576px) and (max-width:767px) {
table.visible-sm { display:table !important; }
tr.visible-sm { display:table-row !important; }
th.visible-sm,
td.visible-sm { display:table-cell !important; }

.visible-sm { display:block !important; }
.visible-sm-block { display:block !important; }
.visible-sm-inline { display:inline !important; }
.visible-sm-inline-block { display:inline-block !important; }
}

@media (min-width:768px) and (max-width:991px) {
table.visible-md { display:table !important; }
tr.visible-md { display:table-row !important; }
th.visible-md,
td.visible-md { display:table-cell !important; }

.visible-md { display:block !important; }
.visible-md-block { display:block !important; }
.visible-md-inline { display:inline !important; }
.visible-md-inline-block { display:inline-block !important; }
}

@media (min-width:992px) and (max-width:1199px) {
table.visible-lg { display:table !important; }
tr.visible-lg { display:table-row !important; }
th.visible-lg,
td.visible-lg { display:table-cell !important; }

.visible-lg { display:block !important; }
.visible-lg-block { display:block !important; }
.visible-lg-inline { display:inline !important; }
.visible-lg-inline-block { display:inline-block !important; }
}

@media (min-width:1200px) {
table.visible-xl { display:table !important; }
tr.visible-xl { display:table-row !important; }
th.visible-xl,
td.visible-xl { display:table-cell !important; }

.visible-xl { display:block !important; }
.visible-xl-block { display:block !important; }
.visible-xl-inline { display:inline !important; }
.visible-xl-inline-block { display:inline-block !important; }
}

@media (max-width:575px)                        { .hidden-xs{display:none !important;} }
@media (min-width:576px) and (max-width:767px)  { .hidden-sm{display:none !important;} }
@media (min-width:768px) and (max-width:991px)  { .hidden-md{display:none !important;} }
@media (min-width:992px) and (max-width:1199px) { .hidden-lg{display:none !important;} }
@media (min-width:1200px)                       { .hidden-xl{display:none !important;} }
</pre>

2020-06-04 14:03:25

对于引导4，这是一个矩阵图像，解释了用于显示/隐藏元素的类取决于屏幕大小:

来源:medium: Bootstrap 4 Hidden & Visible

2020-02-20 09:36:23

Bootstrap v4.1使用新的类名来隐藏网格系统中的列。

要根据屏幕宽度隐藏列，请使用d-none类或d-{sm,md,lg,xl}-none类中的任何一个。要在特定屏幕尺寸上显示列，请将上述类与d-block或d-{sm,md,lg,xl}-block类结合起来。

例子有:

<div class="d-lg-none">隐藏在比lg宽的屏幕上</div> <div class="d-none d-lg-block">隐藏在小于lg的屏幕上</div>

这里还有更多。

2018-05-28 03:24:21

在引导中缺少可见-和隐藏-

推荐文章

最新文章

标签