Twitter引导隐藏元素在小设备上 [英] Twitter bootstrap hide element on small devices

问题描述

我有这个代码：

 < footer class =row 
< nav class =col-sm-3> 
< ul class =list-unstyled> 
< li>文字1< / li> 
< li>文字2< / li> 
< li>文字3< / li> 
< / ul> 
< / nav> 
< nav class =col-sm-3> 
< ul class =list-unstyled> 
< li>文字4< / li> 
< li>文字5< / li> 
< li>文字6< / li> 
< / ul> 
< / nav> 
< nav class =col-sm-3> 
< ul class =list-unstyled> 
< li>文字7< / li> 
< li>文字8< / li> 
< li>文字9< / li> 
< / ul> 
< / nav> 
< nav class =col-sm-3> 
< ul class =list-unstyled> 
< li>文字10< / li> 
< li>文字11< / li> 
< li>文字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列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>文字1< / li> 
< li>文字2< / li> 
< li>文字3< / li> 
< / ul> 
< / nav> 
< nav class =col-xs-4 col-sm-3> 
< ul class =list-unstyled> 
< li>文字4< / li> 
< li>文字5< / li> 
< li>文字6< / li> 
< / ul> 
< / nav> 
< nav class =col-xs-4 col-sm-3> 
< ul class =list-unstyled> 
< li>文字7< / li> 
< li>文字8< / li> 
< li>文字9< / li> 
< / ul> 
< / nav> 
< nav class =hidden-xs col-sm-3> 
< ul class =list-unstyled> 
< li>文本10< / li> 
< li>文字11< / li> 
< li>文字12< / li> 
< / ul> 
< / nav> 
< / footer> 
  

正如你所说，hidden-xs是不够的，你必须结合xs和sm类。 / p>

---

这里是官方文档的链接：可用的响应类以及网格系统。

有头：

• 1 row = 12 cols / strong> -__
  


• SM __
  


• M e D 设备： col-md -__
  


• strong> col-lg -__
  


• 使仅可见（隐藏在其他位置）： visible-md < 仅隐藏（在其他位置可见）： hidden-xs （仅隐藏在
  XtraSmall中）

I have this code:

<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>

Four blocks with some texts inside. They are equal in width, I've set col-sm-3 to all of them and what I want to do is to hide the last nav on extra small devices. I've tried to use hidden-xs on that nav and it hides it, but in the same time I want the other blocks to expand (change class from col-sm-3 to col-sm-4) col-sm-4 X 3 = 12.

Any solution?

解决方案

On small device : 4 columns x 3 (= 12) ==> col-sm-3

On extra small : 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>

As you say, hidden-xs is not enough, you have to combine xs and sm class.

---

Here is links to the official doc about available responsive classes and about the grid system.

Have in head :

• 1 row = 12 cols
• For XtraSmall device : col-xs-__
  
• For SMall device : col-sm-__
  
• For MeDium Device: col-md-__
  
• For LarGe Device : col-lg-__
  
• Make visible only (hidden on other) : visible-md (just visible in medium [not in lg xs or sm])
• Make hidden only (visible on other) : hidden-xs (just hidden in XtraSmall)

这篇关于Twitter引导隐藏元素在小设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！