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

Question

提问by Kaitlyn2004

Looking through bootstrap it looks like they support collapsing the menubar items for smaller screens. Is there something similar for other items on the page?

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

For example, I have a along with nav-pills floated right. On a small screen this causes issues. I'd love to at least put it into a similar click-to-show-more dropdown.

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

Is this possible within existing Bootstrap framework?

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

Answer 1

回答by Marc Uberstein

New visible classes added to Bootstrap

新的可见类添加到 Bootstrap

Extra small devicesPhones (<768px) (Class names : .visible-xs-block, hidden-xs)

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

Small devicesTablets (≥768px) (Class names : .visible-sm-block, hidden-sm)

小型设备平板电脑（≥768px）(Class names : .visible-sm-block, hidden-sm)

Medium devicesDesktops (≥992px) (Class names : .visible-md-block, hidden-md)

中型设备桌面（≥992px）(Class names : .visible-md-block, hidden-md)

Large devicesDesktops (≥1200px) (Class names : .visible-lg-block, hidden-lg)

大型设备桌面（≥1200px）(Class names : .visible-lg-block, hidden-lg)

For more information : http://getbootstrap.com/css/#responsive-utilities

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

Below is deprecated as of v3.2.0

以下从 v3.2.0 开始弃用

Extra small devices Phones (<768px) (Class names : .visible-xs, hidden-xs)

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

Small devices Tablets (≥768px) (Class names : .visible-sm, hidden-sm)

小型设备平板电脑（≥768px） (Class names : .visible-sm, hidden-sm)

Medium devices Desktops (≥992px) (Class names : .visible-md, hidden-md)

中型设备桌面（≥992px） (Class names : .visible-md, hidden-md)

Large devices Desktops (≥1200px) (Class names : .visible-lg, hidden-lg)

大型设备桌面（≥1200px） (Class names : .visible-lg, hidden-lg)

Much older Bootstrap

更老的 Bootstrap

.hidden-phone, .hidden-tabletetc. are unsupported/obsolete.

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

UPDATE:

更新：

In Bootstrap 4 there are 2 types of classes:

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

The hidden-*-upwhich hide the element when the viewport is at the given breakpoint or wider.
hidden-*-downwhich hide the element when the viewport is at the given breakpoint or smaller.

在hidden-*-up其中隐藏元件时视口是在给定的断点或更宽。
hidden-*-down当视口位于给定的断点或更小时，隐藏元素。

Also, the new xlviewport is added for devices that are more then 1200px width. For more information click here.

此外，xl为宽度超过 1200 像素的设备添加了新视口。如需更多信息，请点击此处。

Answer 2

回答by Julien

Bootstrap 4 Beta Answer:

Bootstrap 4 测试版答案：

d-block d-md-noneto hide on medium, large and extra largedevices.
d-none d-md-blockto hide on small and extra-smalldevices.

d-block d-md-none到隐藏在中型，大型和特大型设备。
d-none d-md-block到隐藏在小型和超小型设备。

Note that you can also inline by replacing d-*-blockwith d-*-inline-block

请注意，您也可以通过替换d-*-block为内联d-*-inline-block

Old answer: Bootstrap 4 Alpha

旧答案：Bootstrap 4 Alpha

You can use the classes .hidden-*-upto hide on a given size and larger devices
.hidden-md-upto hide on medium, large and extra largedevices.
The same goes with .hidden-*-downto hide on a given size and smaller devices
.hidden-md-downto hide on medium, small and extra-smalldevices
visible-* is no longer an option with bootstrap 4
To display only on medium devices, you can combine the two:
hidden-sm-downand hidden-xl-up

您可以使用这些类.hidden-*-up隐藏在给定大小和更大的设备上
.hidden-md-up到隐藏在中型，大型和特大型设备。
与这同样.hidden-*-down隐藏在一个给定的尺寸和更小的设备
.hidden-md-down到隐藏在中型，小型和超小型设备
可见-* 不再是引导程序 4 的选项
要仅在中型设备上显示，您可以将两者结合起来：
hidden-sm-down和 hidden-xl-up

The valid sizes are:

有效尺寸为：

xsfor phones in portrait mode (<34em)
smfor phones in landscape mode (≥34em)
mdfor tablets (≥48em)
lgfor desktops (≥62em)
xlfor desktops (≥75em)

xs适用于纵向模式的手机 (<34em)
sm对于横向模式的手机（≥34em）
md平板电脑 (≥48em)
lg台式机（≥62em）
xl台式机 (≥75em)

This was as of Bootstrap 4, alpha 5 (January 2017). More details here: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

这是从 Bootstrap 4, alpha 5（2017 年 1 月）开始的。更多细节在这里：http: //v4-alpha.getbootstrap.com/layout/responsive-utilities/

On Bootstrap 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

在 Bootstrap 4.3.x 上：https://getbootstrap.com/docs/4.3/utilities/display/

Answer 3

回答by kiranvj

Bootstrap 4.x answer

Bootstrap 4.x 答案

hidden-*classes are removed from Bootstrap 4 beta onward.

hidden-*从 Bootstrap 4 beta 开始删除类。

If you want to show on medium and up use the d-*classes, e.g.:

如果您想在中等和更高版本上显示，请使用这些d-*类，例如：

<div class="d-none d-md-block">This will show in medium and up</div>

If you want to show only in small and below use this:

如果您只想以小尺寸和下方显示，请使用以下命令：

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

Screen size and class chart

屏幕尺寸和类图

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

Rather than using explicit .visible-*classes, you make an element visible by simply not hiding it at that screen size. You can combine one .d-*-noneclass with one .d-*-blockclass to show an element only on a given interval of screen sizes (e.g. .d-none.d-md-block.d-xl-noneshows the element only on medium and large devices).

与使用显式.visible-*类不同，您可以通过简单地不将元素隐藏在该屏幕大小来使元素可见。您可以将一个.d-*-none类与一个.d-*-block类组合以仅在给定的屏幕尺寸间隔上.d-none.d-md-block.d-xl-none显示元素（例如，仅在中型和大型设备上显示元素）。

Documentation

文档

Answer 4

回答by john taylor

You can enter these module class suffixes for any module to better control where it will show or be hidden.

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

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

http://twitter.github.com/bootstrap/scaffolding.htmlscroll to bottom

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

Answer 5

回答by Jazimov

I have a couple of clarifications to add here:

我有几个澄清要在这里添加：

1) The list shown (visible-phone, visible-tablet, etc.) is deprecated in Bootstrap 3. The new values are:

1) Bootstrap 3 中不推荐使用显示的列表（visible-phone、visible-tablet 等）。新值是：

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

可见-xs-*
可见-sm-*
可见-MD-*
可见-lg-*
隐藏-xs-*
隐藏-sm-*
隐藏-MD-*
隐藏-lg-*

The asterisk translates to the following for each (I show only visible-xs-* below):

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

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

可见-xs-块
可见-xs-内联
可见 xs 内联块

2) When you use these classes, you don't add a period in front (as confusingly shown in part of the answer above).

2）使用这些类时，不要在前面添加句点（如上面部分答案中令人困惑的所示）。

For example:

例如：

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

3) You can use visible-* and hidden-* (for example, visible-xs and hidden-xs) but these have been deprecated in Bootstrap 3.2.0.

3) 您可以使用 visible-* 和 hidden-*（例如，visible-xs 和 hidden-xs），但这些在 Bootstrap 3.2.0 中已被弃用。

For more details and the latest specs, go here and search for "visible": http://getbootstrap.com/css/

有关更多详细信息和最新规格，请转到此处并搜索“可见”：http: //getbootstrap.com/css/

Answer 6

回答by Gediminas

All hidden-*-up, hidden-*classes doesn't work for me, so I'm adding self-made hiddenclass before visible-*(which works for current bootstrap version). It is very useful if you need to show div only for one screen, and hide for all others.

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

CSS:

CSS：

.hidden {display:none;}

HTML:

HTML：

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

Answer 7

回答by Przemek Nowak

For Bootstrap 4.0 beta (and I assume this will stay for final) there is a change - be aware that the hidden classes were removed.

对于 Bootstrap 4.0 测试版（我认为这将保留为最终版本）有一个变化 - 请注意隐藏的类已被删除。

See the docs: https://getbootstrap.com/docs/4.0/utilities/display/

查看文档：https: //getbootstrap.com/docs/4.0/utilities/display/

In order to hide the content on mobile and display on the bigger devices you have to use the following classes:

为了在移动设备上隐藏内容并在更大的设备上显示，您必须使用以下类：

d-none d-sm-block

The first class set display none all across devices and the second one display it for devices "sm" up (you could use md, lg, etc. instead of sm if you want to show on different devices.

第一个类集在所有设备上都显示 none，第二个类在设备“sm”上显示它（如果您想在不同的设备上显示，您可以使用 md、lg 等代替 sm。

I suggest to read about that before migration:

我建议在迁移之前阅读一下：

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

Answer 8

回答by Tai Ly

In boostrap 4.1 (run snippet because I copied whole table code from Bootstrap documentation):

在 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

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

提问by Kaitlyn2004

回答by Marc Uberstein

New visible classes added to Bootstrap

新的可见类添加到 Bootstrap

For more information : http://getbootstrap.com/css/#responsive-utilities

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

回答by Julien

Bootstrap 4 Beta Answer:

Bootstrap 4 测试版答案：

回答by kiranvj

回答by john taylor

回答by Jazimov

回答by Gediminas

回答by Przemek Nowak

回答by Tai Ly

相关推荐

最近更新

标签

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

提问by Kaitlyn2004

回答by Marc Uberstein

New visible classes added to Bootstrap

新的可见类添加到 Bootstrap

For more information : http://getbootstrap.com/css/#responsive-utilities

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

回答by Julien

Bootstrap 4 Beta Answer:

Bootstrap 4 测试版答案：

回答by kiranvj

回答by john taylor

回答by Jazimov

回答by Gediminas

回答by Przemek Nowak

回答by Tai Ly

相关推荐

Html css“左”不起作用

如何使用 HTML 进行 Skype 通话？

Html 如何删除列表项之间的空格

Html 无法摆脱我网站上的水平滚动条

相关推荐

最近更新

标签