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>

Answer 2

為了幫助他人，您可以參考Bootstrap文檔“ 響應實用程序 ”

正如Nicolapps指出的，您將使用.hidden .hidden-xs

<div class="container">
    <section class="row"
        <div class="hidden-xs col-sm-10">
            <p>content</p>
        </div>
        <div class="hidden-xs col-sm-2">
            <p>content</p>
        </div>
    </section>
</div>

Answer 3

您可以嘗試類似的東西，應該將圖標指針事件設置為none

.container {
position: relative
}

i {
position: absolute;
top: npx;
left: npx;
pointer-events: none;
}

select {
font-size: 0;
}

Answer 4

對於引導程序 5

使用

.d-none.d-sm-塊

參考： https://getbootstrap.com/docs/5.0/utilities/display/