Html 小型设备上的 Twitter 引导程序隐藏元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19659726/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap hide element on small devices
提问by Crisan Raluca Teodora
I have this code:
我有这个代码：
<footer class="row">
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
</ul>
</nav>
<nav class="col-sm-3">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
</footer>
Four blocks with some texts inside. They are equal in width, I've set col-sm-3to all of them and what I want to do is to hide the last navon extra small devices. I've tried to use hidden-xson that navand it hides it, but in the same time I want the other blocks to expand (change class from col-sm-3to col-sm-4) col-sm-4 X 3 = 12.
四个块，里面有一些文本。它们的宽度相等，我已经设置col-sm-3了所有这些，我想要做的是nav在超小设备上隐藏最后一个。我尝试使用hidden-xs它nav并隐藏它，但同时我希望其他块扩展（将类从 更改col-sm-3为col-sm-4）col-sm-4 X 3 = 12。
Any solution?
有什么解决办法吗？
回答by BENARD Patrick
On small device : 4 columns x 3 (= 12) ==> col-sm-3
在小型设备上： 4 columns x 3 (= 12) ==> col-sm-3
On extra small : 3 columns x 4 (= 12) ==> col-xs-4
在特小： 3 columns x 4 (= 12) ==> col-xs-4
<footer class="row">
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 1</li>
<li>Text 2</li>
<li>Text 3</li>
</ul>
</nav>
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 4</li>
<li>Text 5</li>
<li>Text 6</li>
</ul>
</nav>
<nav class="col-xs-4 col-sm-3">
<ul class="list-unstyled">
<li>Text 7</li>
<li>Text 8</li>
<li>Text 9</li>
</ul>
</nav>
<nav class="hidden-xs col-sm-3">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
</footer>
As you say, hidden-xs is not enough, you have to combine xs and sm class.
正如你所说，hidden-xs 是不够的，你必须结合 xs 和 sm 类。
Here is links to the official doc about available responsive classesand about the grid system.
Have in head :
脑子里有：
- 1 row = 12 cols
- For XtraSmall device: col-xs-__
- For SMall device: col-sm-__
- For MeDium Device: col-md-__
- For LarGe Device: col-lg-__
- Make visible only(hidden on other) : visible-md(just visible in medium [not in lg xs or sm])
- Make hidden only(visible on other) : hidden-xs(just hidden in XtraSmall)
- 1 行 = 12 列
- 对于Xtra Small 设备：col-xs-__
- 对于SM所有设备：col-sm-__
- 对于中号Ë dIUM设备：COL-MD-__
- 对于大号AR ģÊ设备：COL-LG-__
- 请才可见（隐藏其他）：可见-MD（只可见中等[不是LG XS或SM]）
- 让只隐藏（其他可见）：隐藏-XS（只是隐藏在XtraSmall）
回答by Zim
Bootstrap 4
引导程序 4
The display (hidden/visible) classesare changed in Bootstrap 4. To hide on the xsviewport use:
的显示（隐藏/可见）类在自举4.改变以隐藏于xs视窗使用：
d-none d-sm-block
d-none d-sm-block
Also see: Missing visible-** and hidden-** in Bootstrap v4
另请参阅：Bootstrap v4 中缺少 visible-** 和 hidden-**
Bootstrap 3(original answer)
Bootstrap 3（原始答案）
Use the hidden-xsutility class..
使用hidden-xs实用程序类..
<nav class="col-sm-3 hidden-xs">
<ul class="list-unstyled">
<li>Text 10</li>
<li>Text 11</li>
<li>Text 12</li>
</ul>
</nav>
回答by Przemek Nowak
For Bootstrap 4.0 there is a change
对于 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
https://getbootstrap.com/docs/4.0/migration/#responsive-utilities
回答by Chris O
<div class="small hidden-xs">
Some Content Here
</div>
This also works for elements not necessarily used in a grid /small column. When it is rendered on larger screens the font-size will be smaller than your default text font-size.
这也适用于不一定在网格/小列中使用的元素。当它在较大的屏幕上呈现时，字体大小将小于您的默认文本字体大小。
This answer satisfies the question in the OP title (which is how I found this Q/A).
这个答案满足了 OP 标题中的问题（这就是我找到这个 Q/A 的方式）。
