Twitter bootstrap在小设备上隐藏元素

我有这个代码：

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

四块里面有一些文字。 它们的宽度是相等的，我已经为它们设置了col-sm-3 ，我想要做的就是将最后一个nav col-sm-3隐藏在额外的小设备上。 我试图在该nav上使用hidden-xs并隐藏它，但是同时我想让其他块展开（将col-sm-3改为col-sm-4 ） col-sm-4 X 3 = 12 。

任何解决scheme

Answer 1

在小设备上： 4 columns x 3 (= 12) ==> col-sm-3

特小： 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> 

正如你所说，hidden-xs是不够的，你必须结合xs和sm类。

---

这里是关于可用响应式课程和网格系统的官方文档的链接。

有头脑：

• 1排= 12列
• 对于X tra S mall设备 ： col-xs -__
• 对于SM所有设备 ： col-sm -__
• 对于数字设备 ： col-md -__
• 对于图像设备 ： col-lg -__
• 只可见 （隐藏在其他）： 可见的md （只在媒体中可见[不在lg xs或sm]）
• 只隐藏 （可见于其他）： hidden-xs （只隐藏在XtraSmall中）

Answer 2

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

http://bootply.com/90722

Answer 3

 <div class="small hidden-xs"> Some Content Here </div> 

这也适用于网格/小列中不一定使用的元素。 在较大的屏幕上渲染时，字体大小将比您的默认文本字体大小小。

这个答案满足OP标题中的问题（我是如何find这个Q / A的）。

Answer 4

Bootstrap 4.0有一个改变

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

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

 d-none d-sm-block 

第一类设置在所有设备上都不显示，第二类显示设备“sm”（如果要显示在不同的设备上，可以使用md，lg等，而不是sm）。

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

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