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的方式）。