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>