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在超小设备上隐藏最后一个.我试图使用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类.

以下是有关可用响应类和网格系统的官方文档的链接.

有头脑:

• 1行= 12列
• 对于X tra S mall设备:col-xs -__
  
• 对于SM所有设备:col-sm -__
  
• 对于M e D ium设备:col-md -__
  
• 对于L ar G e设备:col-lg -__
  
• 请才可见(隐藏其他):可见-MD([不是LG的XS或SM]在中只是可见的)
• 让只隐藏(其他可见):隐藏-XS(只是隐藏在XtraSmall)

Answer 2

Bootstrap 4

的显示(隐藏/可见)类在自举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的方式).