在响应式布局中隐藏元素?

通过引导,它看起来像他们支持折叠菜单栏项目的小屏幕。页面上的其他项目是否也有类似的内容?

例如,我有一个与navi -pill浮动正确。在小屏幕上,这会引起问题。我想至少把它放到类似的点击显示更多的下拉列表中。

这在现有的引导框架中是可能的吗?

530443 次浏览

您可以为任何模块输入这些模块类后缀,以更好地控制它将在何处显示或隐藏。

.visible-phone
.visible-tablet
.visible-desktop
.hidden-phone
.hidden-tablet
.hidden-desktop

http://twitter.github.com/bootstrap/scaffolding.html滚动到底部

新的可见类添加到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)

有关更多信息:http://getbootstrap.com/css/#responsive-utilities


以下内容在v3.2.0版本已弃用


超小型设备 手机(<768px) (Class names : .visible-xs, hidden-xs)

< p >小设备 平板(≥768px) (Class names : .visible-sm, hidden-sm)

< p >中设备 台式机(≥992px) (Class names : .visible-md, hidden-md)

.使用实例 < p >大型设备 台式机(≥1200px) (Class names : .visible-lg, hidden-lg)


更老的引导


.hidden-phone, .hidden-tablet等不支持/过时。

更新:

在Bootstrap 4中有两种类型的类:

  • hidden-*-up,当视口位于给定断点或更宽时隐藏元素。
  • hidden-*-down,当视口位于给定的断点或更小时隐藏元素。

此外,为宽度大于1200px的设备添加了新的xl视口。欲了解更多信息,请点击这里

在此,我有几点需要澄清:

1) Bootstrap 3中显示的列表(可见-phone,可见-tablet等)已弃用。新的值是:

  • visible-xs - *
  • visible-sm - *
  • visible-md - *
  • visible-lg - *
  • hidden-xs - *
  • hidden-sm - *
  • hidden-md - *
  • hidden-lg - *

星号的含义如下(我只在下面显示了visible-xs-*):

  • visible-xs-block
  • visible-xs-inline
  • visible-xs-inline-block

2)当你使用这些类的时候,你不会在前面加一个句号(正如上面答案的一部分所显示的那样)。

例如:

<div class="visible-md-block col-md-6 text-right text-muted">
<h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3)你可以使用visible-*和hidden-*(例如,visible-xs和hidden-xs),但这些在Bootstrap 3.2.0中已被弃用。

欲了解更多详细信息和最新规格,请点击这里并搜索“可见”: http://getbootstrap.com/css/ < / p >

引导4测试答案:

d-block d-md-none藏在中号,大号和特大号上设备。

d-none d-md-block藏在小号和特小号上设备。

enter image description here

注意,你也可以内联用d-*-inline-block替换d-*-block


旧答案:Bootstrap 4 Alpha

  • 你可以使用类.hidden-*-up来隐藏在给定大小和更大的设备上

    .hidden-md-up藏在中号,大号和特大号上设备。

    李< /引用> < / >
  • .hidden-*-down同样适用于隐藏在给定大小和更小的设备上

    .hidden-md-down藏在中号、小号和特小号上设备

    李< /引用> < / >
  • 可见-*不再是一个选项与bootstrap 4

  • 要显示仅适用于中型设备,你可以将两者结合起来:

    hidden-sm-downhidden-xl-up

    李< /引用> < / >

有效的大小是:

  • xs用于纵向模式下的手机(<34em)
  • sm为手机在横向模式(≥34em)
  • md片剂(≥48em)
  • lg for台式机(≥62em)
  • xl for台式机(≥75em)

这是截至Bootstrap 4, alpha 5(2017年1月)。 更多详细信息:http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

在引导4.3。x: https://getbootstrap.com/docs/4.3/utilities/display/

所有hidden-*-uphidden-*类都不适合我,所以我在visible-*之前添加了自制的hidden类(适用于当前的引导版本)。如果您只需要在一个屏幕上显示div,而在其他屏幕上隐藏div,那么它是非常有用的。

CSS:

.hidden {display:none;}

HTML:

<div class="col-xs-12 hidden visible-xs visible-sm">
<img src="photo.png" style="width:100%">
</div>

Bootstrap 4.0测试版(我认为这将是最终版)有一个变化-注意隐藏类被删除了。

参见文档: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

引导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>

屏幕大小和类图

屏幕大小
隐藏在所有 .d-none
只隐藏在xs上 .d-none .d-sm-block
只在sm上隐藏 .d-sm-none .d-md-block
仅在md上隐藏 .d-md-none .d-lg-block
仅在lg上隐藏 .d-lg-none .d-xl-block
仅在xl上隐藏 .d-xl-none
所有设备均可见 .d-block
仅在xs上可见 .d-block .d-sm-none
只能在sm上可见 .d-none .d-sm-block .d-md-none
仅在md上可见 .d-none .d-md-block .d-lg-none
仅在lg上可见 .d-none .d-lg-block .d-xl-none
仅在xl上可见 .d-none .d-xl-block
不是使用显式的.visible-*类,而是创建一个元素 可见的方式就是不把它隐藏在那个屏幕大小。你可以结合 一个.d-*-none类和一个.d-*-block类只显示一个元素 在给定的屏幕尺寸间隔上(例如.d-none.d-md-block.d-xl-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

< p >额外的CSS 从移动视图的所有页面中删除边栏:

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}