html - Twitter bootstrap 在小型设备上隐藏元素

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>

四个 block ，里面有一些文本。它们的宽度相等，我已将它们全部设置为 col-sm-3，我想做的是在超小型设备上隐藏最后一个 nav。我尝试在 nav 上使用 hidden-xs 并将其隐藏，但同时我希望其他 block 扩展(从 更改类col-sm-3 到 col-sm-4) col-sm-4 X 3 = 12。

有什么解决办法吗？

Answer 1

在小型设备上:4 列 x 3 (= 12) ==> col-sm-3

超小:3 列 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 列
• 对于 XtraSma​​ll 设备:col-xs-__
  
• 对于SM所有设备:col-sm-__
  
• MeDium 设备:col-md-__
  
• LarGe 设备:col-lg-__
  
• 使仅可见(隐藏在其他人身上):visible-md(仅在中 [不在 lg xs 或 sm])
• 使仅隐藏(在其他设备上可见):hidden-xs(仅隐藏在XtraSmall)