Question

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

例如，我有一个导航药正好浮动。在小屏幕上，这会导致问题。我希望至少把它放到类似的点击显示更多下拉列表中。

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

Answer 1

添加到Bootstrap的新可见类

超小型设备 电话（＆lt; 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起不推荐使用

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

更旧的Bootstrap

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

<强>更新

在Bootstrap 4中有两种类型：

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

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

Answer 2

Bootstrap 4 Beta答案：

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

d-*-block 隐藏在小型和超小型设备上。

请注意，您也可以将d-*-inline-block替换为.hidden-*-up

来内联

旧答案：Bootstrap 4 Alpha

您可以使用类.hidden-md-up来隐藏给定大小和更大的设备

.hidden-*-down 隐藏在中型，大型和超大型设备上。
.hidden-md-down隐藏在给定尺寸和较小设备上也是如此

hidden-sm-down 隐藏在中型，小型和超小型设备上
visible- *不再是bootstrap 4的选项
要仅在中型设备上显示，您可以将两者结合使用：

hidden-xl-up 和 xs

有效尺寸为：

sm适用于纵向模式的手机（＆lt; 34em）
md适用于横向模式（≥34em）的手机
lg（≥48em）
xl（≥62em）
static double pow(double x, int mu) { if (mu == 0) return 1; if (mu == 1) return x; return x * pow(x, mu - 1); } static double fact(int n) { if (n == 1 || n == 0) return 1; return n * fact(n - 1); } static double sin(double x) { var s = x; for (int i = 1; i < 1000; i++) { s += pow(-1, i) * pow(x, 2 * i + 1) / fact(2 * i + 1); } return s; } public static void Main(String[] param) { try { while (true) { Console.WriteLine("Enter x value: "); double x = double.Parse(Console.ReadLine()); var sinX = sin(x); Console.WriteLine("Sin of {0} is {1}: " , x , sinX); Console.ReadLine(); } } catch (Exception ex) { Console.WriteLine(ex.Message); } }（≥75em）

这是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/

Answer 3

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

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

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

Answer 4

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

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

visible-xs- *
visible-sm- *
可见-MD - *
visible-lg- *
隐藏-XS - *
hidden-sm- *
hidden-md- *
隐藏-LG - *

星号转换为以下各项（我只在下面显示了可见的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中弃用。

有关详细信息和最新规格，请转到此处并搜索＆＃34;可见＆＃34;： http://getbootstrap.com/css/

Answer 5

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 6

所有hidden-*-up，hidden-*课程对我都不起作用，因此我在hidden之前添加了自制visible-*课程对于当前的bootstrap版本）。如果您只需要为一个屏幕显示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 7

对于Bootstrap 4.0 beta（我假设这将保留最终版本）有一个更改 - 请注意隐藏的类被删除。

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

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

d-none d-sm-block

第一类设置在设备上显示全部，第二类显示设备“sm”up（如果要在不同设备上显示，可以使用md，lg等代替sm。

我建议在迁移之前阅读：

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

Answer 8

在boostrap 4.1（运行代码段，因为我从Bootstrap文档中复制了整个表代码）：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

Answer 9

其他CSS 从“移动”视图中的所有页面中删除边栏：

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

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

9 个答案:

添加到Bootstrap的新可见类

有关详情：http://getbootstrap.com/css/#responsive-utilities

Bootstrap 4 Beta答案：