我有這樣的結(jié)構(gòu):

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

我試圖在手機屏幕上隱藏右邊的導(dǎo)航條。我把它設(shè)置為xs-hidden，但它仍然顯示出來。

有辦法在xs屏幕上隱藏導(dǎo)航條嗎？

# # #使用。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>

# # #為了幫助他人和您，請參考引導(dǎo)程序文檔“響應(yīng)實用程序”

正如Nicolapps指出的。隱藏-x

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

# # #你可以試試這種東西 您應(yīng)該將圖標(biāo)指針事件設(shè)置為無

.container {
position: relative
}

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

select {
font-size: 0;
}

# # #對于引導(dǎo)數(shù)據(jù)庫5

使用

。沒有。d-sm-塊

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