小型设备上的Twitter引导隐藏元素

我有这个代码：

<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在超小型设备上。我尝试在上面使用hidden-xs它nav并将其隐藏，但是同时我希望其他块扩展（将类从更改col-sm-3为col-sm-4）col-sm-4 X 3 = 12。

有什么办法吗？

在小型设备上： 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购物中心设备：col-xs -__
  
• 对于SM所有设备：col-sm -__
  
• 对于中号 Ë d IUM设备：COL-MD -__
  
• 对于大号 AR ģ Ê设备：COL-LG -__
  
• 仅使可见（隐藏在其他位置）：visible-md（仅在介质中可见（在lg xs或sm中不可见））
• 让只隐藏（其他可见）：隐藏-XS（只是隐藏在XtraSmall）

引导程序4

的显示（隐藏/可见）类在自举4.改变以隐藏于xs视窗使用：

d-none d-sm-block

另请参阅：Bootstrap v4中缺少visible-**和hidden-**

Bootstrap 3（原始答案）

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

对于Bootstrap 4.0，有一个更改

请参阅文档：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

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

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

这个答案满足了OP标题中的问题（这就是我找到此问题的方式）。