Bootstrap 3 - 多種尺寸的響應可見性

Question

我有一個使用Bootstrap 3的應用程序。在該應用程序中，我有一個工具欄。我只希望該工具欄出現在「md」和「lg」屏幕上。在「xs」和「sm」大小的屏幕上，我想要一個下拉菜單出現在它的位置。我的問題是，我該怎麼做？目前，我有以下代碼，該代碼可在Bootply中找到。

<div class="container"> 
    <div class="row"> 
    <div class="col-xs-9"> 
     <ul class="list-inline"> 
     <li><i class="fa fa-user"></i></li> 
     <li><strong>Joe Smith</strong></li> 
     </ul> 
    </div> 

    <div class="col-xs-3"> 
     <div class="btn-toolbar pull-right hidden-xs"> 
     <div class="btn-group"> 
      <button class="btn"><i class="fa fa-save"></i></button> 
      <button class="btn"><i class="fa fa-close"></i></button> 
     </div> 
     </div> 

     <div class="dropdown hidden-lg"> 
     <a href="#" data-target="#" class="pull-right" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-chevron-down"></i></a> 
     <ul class="dropdown-menu dropdown-menu-right"> 
      <li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li> 
      <li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li> 
     </ul>   
     </div> 
    </div> 
    </div> 
</div> 

我的問題是，在引導3，responsive utilities似乎並沒有讓定義多個斷點的知名度。有沒有辦法讓我說「如果我的屏幕尺寸是」md「或更少，請顯示菜單，否則使用工具欄？」如果是這樣，怎麼樣？

謝謝！

Answer 1

你可以看看它在這裏 http://getbootstrap.com/css/#responsive-utilities-classes

所以在工具欄上，你應該有

<div class="btn-toolbar pull-right hidden-xs hidden-sm"> 

，並在下拉

<div class="dropdown hidden-md hidden-lg"> 

Answer 2

嘗試使用此代碼：

<div class="container"> 
<div class="row"> 
    <div class="col-xs-9"> 
    <ul class="list-inline"> 
    <li><i class="fa fa-user"></i></li> 
    <li><strong>Joe Smith</strong></li> 
    </ul> 
</div> 

<div class="col-xs-3"> 
    <div class="btn-toolbar pull-right visible-md visible-lg"> 
    <div class="btn-group"> 
     <button class="btn"><i class="fa fa-save"></i></button> 
     <button class="btn"><i class="fa fa-close"></i></button> 
    </div> 
    </div> 

    <div class="dropdown visible-xs visible-sm"> 
    <a href="#" data-target="#" class="pull-right" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-chevron-down"></i></a> 
    <ul class="dropdown-menu dropdown-menu-right"> 
     <li><button class="btn btn-sup"><i class="fa fa-save"></i><span>Save</span></button></li> 
     <li><button class="btn btn-sup"><i class="fa fa-close"></i><span>Close</span></button></li> 
    </ul>   
    </div> 
</div>