html - bootstrap - 在小屏幕上隐藏导航栏？

Question

我有这样的结构:

<div class="container"><div class="row">
  <div class="col-sm-10 col-xs-12">
    <input id="searchBar">
  </div>
  <div class="col-sm-2">
    <ul class="nav nav-pills nav-stacked">
      <li><a>Item</a></li>
      <li><a>Item</a></li>
      <li><a>Item</a></li>
      <li><a>Item</a></li>

    </ul>
  </div>  
</div></div>

我正试图在移动屏幕上隐藏正确的导航栏。我将它设置为 xs-hidden，但它仍然显示。

有没有办法在 xs 屏幕上隐藏导航栏？

Answer 1

使用 .hidden-xs css 类(不是 .xs-hidden)。

<div class="container hidden-xs"><div class="row">
  <div class="col-sm-10 col-xs-12">
    <input id="searchBar">
  </div>
  <div class="col-sm-2">
    <ul class="nav nav-pills nav-stacked hidden-xs">
      <li><a>Item</a></li>
      <li><a>Item</a></li>
      <li><a>Item</a></li>
      <li><a>Item</a></li>

    </ul>
  </div>  
</div></div>