通过引导程序查看,它们似乎支持折叠菜单栏项以用于较小的屏幕。页面上的其他项目是否有类似的东西?
例如,我有一个与 nav-pills 一起浮动的权利。在小屏幕上,这会导致问题。我想至少把它放到一个类似的点击显示更多下拉菜单中。
这在现有的 Bootstrap 框架中是否可行?
通过引导程序查看,它们似乎支持折叠菜单栏项以用于较小的屏幕。页面上的其他项目是否有类似的东西?
例如,我有一个与 nav-pills 一起浮动的权利。在小屏幕上,这会导致问题。我想至少把它放到一个类似的点击显示更多下拉菜单中。
这在现有的 Bootstrap 框架中是否可行?
超小型设备
电话(<768px)(Class names : .visible-xs-block, hidden-xs)
小型设备
平板电脑(≥768px)(Class names : .visible-sm-block, hidden-sm)
中型设备
台式机(≥992px)(Class names : .visible-md-block, hidden-md)
大型设备
台式机(≥1200px)(Class names : .visible-lg-block, hidden-lg)
以下自 v3.2.0 起已弃用
超小型设备电话(<768px)(Class names : .visible-xs, hidden-xs)
小型设备平板电脑(≥768px)(Class names : .visible-sm, hidden-sm)
中型设备台式机(≥992px)(Class names : .visible-md, hidden-md)
大型设备台式机(≥1200px)(Class names : .visible-lg, hidden-lg)
更老的引导程序
.hidden-phone, .hidden-tablet
等不受支持/已过时。
更新:
在 Bootstrap 4 中有两种类型的类:
hidden-*-up
视口位于给定断点或更宽时隐藏元素。hidden-*-down
当视口处于给定断点或更小时隐藏元素。此外,xl
为宽度超过 1200 像素的设备添加了新的视口。欲了解更多信息,请单击此处。
d-block d-md-none
隐藏在中型、大型和超大型设备上。
d-none d-md-block
隐藏在小型和超小型设备上。
请注意,您也可以通过替换为内d-*-block
联d-*-inline-block
旧答案:Bootstrap 4 Alpha
您可以使用这些类.hidden-*-up
在给定尺寸和更大的设备上隐藏
.hidden-md-up
隐藏在中型、大型和超大型设备上。
.hidden-*-down
隐藏在给定尺寸和较小的设备上也是如此
.hidden-md-down
隐藏在中型、小型和超小型设备上
visible-* 不再是 bootstrap 4 的选项
要仅在中型设备上显示,您可以将两者结合起来:
hidden-sm-down
和hidden-xl-up
有效尺寸为:
xs
适用于纵向模式的手机 (<34em)sm
适用于横向模式的手机 (≥34em)md
用于片剂 (≥48em)lg
台式机 (≥62em)xl
台式机 (≥75em)这是自 Bootstrap 4,alpha 5(2017 年 1 月)开始的。更多细节在这里:http: //v4-alpha.getbootstrap.com/layout/responsive-utilities/
在 Bootstrap 4.3.x 上:https ://getbootstrap.com/docs/4.3/utilities/display/
Bootstrap 4.x 答案
hidden-*
从 Bootstrap 4 beta 开始删除类。
如果您想在中上显示,请使用这些d-*
课程,例如:
<div class="d-none d-md-block">This will show in medium and up</div>
如果您只想以较小的尺寸显示,请使用以下命令:
<div class="d-block d-md-none"> This will show only in below medium form factors</div>
屏幕尺寸和类图
| Screen Size | Class |
|--------------------|--------------------------------|
| Hidden on all | .d-none |
| Hidden only on xs | .d-none .d-sm-block |
| Hidden only on sm | .d-sm-none .d-md-block |
| Hidden only on md | .d-md-none .d-lg-block |
| Hidden only on lg | .d-lg-none .d-xl-block |
| Hidden only on xl | .d-xl-none |
| Visible on all | .d-block |
| Visible only on xs | .d-block .d-sm-none |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block |
您无需使用显式类,而是
.visible-*
通过简单地不以该屏幕尺寸隐藏元素来使元素可见。您可以将一.d-*-none
类与一.d-*-block
类结合起来,以仅在给定的屏幕尺寸间隔上.d-none.d-md-block.d-xl-none
显示元素(例如,仅在中型和大型设备上显示元素)。
您可以为任何模块输入这些模块类后缀,以更好地控制它的显示或隐藏位置。
.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop
我有几个澄清要在这里添加:
1) Bootstrap 3 中不推荐使用显示的列表(可见手机、可见平板电脑等)。新值是:
每个星号都转换为以下内容(我在下面仅显示 visible-xs-* ):
2)当您使用这些类时,您不要在前面添加句点(如上面答案的一部分所示)。
例如:
<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright © 2014 Jazimov</h5>
</div>
3) 您可以使用 visible-* 和 hidden-*(例如,visible-xs 和 hidden-xs),但这些在 Bootstrap 3.2.0 中已被弃用。
有关更多详细信息和最新规格,请转到此处并搜索“可见”: http: //getbootstrap.com/css/
对于 Bootstrap 4.0 beta(我认为这将保留为最终版本)有一个变化 - 请注意隐藏的类已被删除。
请参阅文档:https ://getbootstrap.com/docs/4.0/utilities/display/
为了在移动设备上隐藏内容并在更大的设备上显示,您必须使用以下类:
d-none d-sm-block
第一个类集在所有设备上都显示 none,第二个类集为设备“sm”显示它(如果你想在不同的设备上显示,你可以使用 md、lg 等而不是 sm。
我建议在迁移之前阅读一下:
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
All hidden-*-up
, hidden-*
classes 对我不起作用,所以我hidden
之前添加了自制类visible-*
(适用于当前的引导版本)。如果您只需要在一个屏幕上显示 div 并为所有其他屏幕隐藏,这将非常有用。
CSS:
.hidden {display:none;}
HTML:
<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>
附加 CSS 从移动视图中的所有页面中删除侧边栏:
@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}
在 boostrap 4.1 中(运行代码片段,因为我从 Bootstrap 文档中复制了整个表格代码):
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333;
color: #FDFDFD;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #DDD;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
<table class="fixed_headers">
<thead>
<tr>
<th>Screen Size</th>
<th>Class</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hidden on all</td>
<td><code class="highlighter-rouge">.d-none</code></td>
</tr>
<tr>
<td>Hidden only on xs</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
</tr>
<tr>
<td>Hidden only on sm</td>
<td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
</tr>
<tr>
<td>Hidden only on md</td>
<td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
</tr>
<tr>
<td>Hidden only on lg</td>
<td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
</tr>
<tr>
<td>Hidden only on xl</td>
<td><code class="highlighter-rouge">.d-xl-none</code></td>
</tr>
<tr>
<td>Visible on all</td>
<td><code class="highlighter-rouge">.d-block</code></td>
</tr>
<tr>
<td>Visible only on xs</td>
<td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
</tr>
<tr>
<td>Visible only on sm</td>
<td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
</tr>
<tr>
<td>Visible only on md</td>
<td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
</tr>
<tr>
<td>Visible only on lg</td>
<td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
</tr>
<tr>
<td>Visible only on xl</td>
<td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
</tr>
</tbody>
</table>
https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements