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。我尝试在hidden-xs上使用nav并隐藏它，但同时我希望其他块展开（将类从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类。

以下是关于available responsive classes和grid system的官方文档的链接。

有头脑：

1行= 12列
X tra S 商城设备： col-xs -__
SM 所有设备： col-sm -__
对于 M e D 我的设备： col-md -__
L ar G e设备： col-lg -__
使仅显示（隐藏在其他位置）： visible-md （仅在中[不是lg xs或sm]）
仅隐藏（在其他地方可见）： hidden-xs （只是隐藏在 XtraSmall）

Answer 2

Bootstrap 4

引导程序中的display (hidden/visible) classes已更改。要隐藏xs视口使用：

d-none d-sm-block

另见：Missing visible-** and hidden-** in 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的方式）。

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

4 个答案:

对于Bootstrap 4.0，有一个更改