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

Question

通过引导程序查看，它们似乎支持折叠菜单栏项以用于较小的屏幕。页面上的其他项目是否有类似的东西？

例如，我有一个与 nav-pills 一起浮动的权利。在小屏幕上，这会导致问题。我想至少把它放到一个类似的点击显示更多下拉菜单中。

这在现有的 Bootstrap 框架中是否可行？

Answer 1

您可以为任何模块输入这些模块类后缀，以更好地控制它的显示或隐藏位置。

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

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

Answer 2

新的可见类添加到 Bootstrap

超小型设备 电话（(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 起已弃用

---

超小型设备 电话（(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)

---

更老的 Bootstrap

---

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

更新：

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

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

此外，为宽度超过 1200 像素的设备添加了新的 xl 视口。 For more information click here.

Answer 3

我有几个澄清要在这里补充：

1) Bootstrap 3 中已弃用显示的列表（可见手机、可见平板电脑等）。新值是：

• 可见-xs-*
• 可见-sm-*
• 可见-md-*
• 可见-lg-*
• hidden-xs-*
• 隐藏-sm-*
• hidden-md-*
• 隐藏-lg-*

每个星号都转换为以下内容（我在下面只显示了 visible-xs-*）：

• 可见-xs-块
• 可见-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/

Answer 4

Bootstrap 4 测试版答案：

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 用于纵向模式的手机 (
• 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/

Answer 5

所有hidden-*-up、hidden-* 类对我都不起作用，所以我在visible-* 之前添加了自制的hidden 类（适用于当前引导版本）。如果您只需要在一个屏幕上显示 div 并为所有其他屏幕隐藏，这将非常有用。

CSS：

.hidden {display:none;}

HTML：

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

Answer 6

对于 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

Answer 7

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 仅在中型和大型设备上显示元素）。

Documentation

Answer 8

在 boostrap 4.1 中（运行 sn-p，因为我从 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

Answer 9

附加 CSS 从移动视图中的所有页面中删除侧边栏：

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