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

html CSS

Tom凯

2020-03-23

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

例如，我有一个与右浮动的导航丸一起。在小屏幕上，这会导致问题。我希望至少将其放入类似的点击显示更多下拉菜单中。

在现有的Bootstrap框架中可能吗？

第2978篇《隐藏响应式布局中的元素？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

小胖西里 2020.03.23

在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

宝儿猿 2020.03.23

对于Bootstrap 4.0 beta（我认为它将保留到最终版本）进行了更改-请注意，隐藏类已被删除。

请参阅文档：https : //getbootstrap.com/docs/4.0/utilities/display/

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

d-none d-sm-block

第一个类集不会在所有设备上显示所有内容，而第二个类集则用于在设备“ sm”上显示它（如果要在其他设备上显示，则可以使用md，lg等代替sm）。

我建议在迁移之前先阅读以下内容：

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

阳光西门 2020.03.23

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

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

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

古一乐 2020.03.23

Bootstrap 4 Beta Answer:

d-block d-md-none to hide on medium, large and extra large devices.

d-none d-md-block to hide on small and extra-small devices.

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

Old answer: Bootstrap 4 Alpha

You can use the classes .hidden-*-up to hide on a given size and larger devices

.hidden-md-up to hide on medium, large and extra large devices.
The same goes with .hidden-*-down to hide on a given size and smaller devices

.hidden-md-down to hide on medium, small and extra-small devices
visible-* is no longer an option with bootstrap 4
To display only on medium devices, you can combine the two:

hidden-sm-down and hidden-xl-up

The valid sizes are:

xs for phones in portrait mode (<34em)
sm for phones in landscape mode (≥34em)
md for tablets (≥48em)
lg for desktops (≥62em)
xl for desktops (≥75em)

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

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

达蒙 2020.03.23

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

文献资料

猴子 2020.03.23

我要在此处添加一些说明：

1）在Bootstrap 3中已弃用显示的列表（可视电话，可视平板电脑等）。新值是：

可见-xs- *
可见-sm- *
可见-md- *
可见-lg- *
隐藏的xs- *
隐藏的sm- *
隐藏的md- *
隐藏的LG- *

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

可见XS块
可见xs内联
可见XS内联块

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/

卡卡西Near 2020.03.23

all hidden-*-up，hidden-*类对我不起作用，因此我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>

村村 2020.03.23

新的可见类添加到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/#sensitive-utilities

从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 等不被支持/过时。

更新：

In Bootstrap 4 there are 2 types of classes:

The hidden-*-up which hide the element when the viewport is at the given breakpoint or wider.
hidden-*-down which hide the element when the viewport is at the given breakpoint or smaller.

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答