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

问题描述

我有这个代码:

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

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.

有什么解决办法吗?

推荐答案

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

On small device : 4 columns 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 类.

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

这里是关于可用响应类和关于网格系统.

脑子里有:

• 1 行 = 12 列
• 对于XtraS商城设备:col-xs-__
  
• 对于SM所有设备:col-sm-__
  
• 对于MeDium 设备:col-md-__
  
• 对于LarGe 设备:col-lg-__
  
• 使仅可见(隐藏在其他对象上):visible-md(仅在中 [不在 lg xs 或 sm 中])
• 使仅隐藏(在其他人上可见):hidden-xs(只是隐藏在超小)

• 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屋！