94

我有这个代码：

<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

4 回答 4

155

在小型设备上：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 -__
  • 对于M e D ium 设备：col-md -__
  • 对于L ar G e 设备：col-lg -__
  • 仅显示（隐藏在其他位置）：visible -md（仅在介质中可见 [不在 lg xs 或 sm 中]）
  • 仅隐藏（其他可见）：hidden-xs（仅隐藏在 XtraSmall 中）
于 2013-10-29T13:53:25.503 回答
89

引导程序 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

于 2013-10-29T13:53:16.283 回答
23

对于 Bootstrap 4.0 有一个变化

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

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

d-none d-sm-block

第一个类集在所有设备上都显示 none，第二个类集为设备“sm”显示它（如果你想在不同的设备上显示，你可以使用 md、lg 等而不是 sm。

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

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

于 2017-09-18T09:40:06.760 回答
12 
<div class="small hidden-xs">
    Some Content Here
</div>

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

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

于 2016-01-14T15:00:48.870 回答