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

Question

我有这个代码：

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

有解决方案吗

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 -__
  
• 对于M e D ium设备 ： col-md -__
  
• 对于L ar G e设备 ： col-lg -__
  
• 仅显示 （隐藏在其他上）： visible-md （仅在介质中可见[不在lg xs或sm]）
• 仅隐藏 （在其他上可见）： hidden-xs （仅隐藏在XtraSmall中）

Answer 2

Bootstrap 4

在Bootstrap 4中更改显示（隐藏/可见）类。要隐藏在xs视口上，请使用：

d-none d-sm-block

另请参阅： Bootstrap v4中缺少可见 - **和隐藏 - **

---

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

Answer 3

对于Bootstrap 4.0，有一个变化

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

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

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

这个答案满足了OP标题中的问题（这就是我发现这个Q / A的方式）。