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>

我的问题是，在Bootstrap 3中，responsive utilities似乎不允许为可见性定义多个断点。有没有办法让我说出“如果我的屏幕大小是”md“或更少，请显示菜单。否则，使用工具栏？”如果是这样，怎么样？

谢谢！

Answer 1

你可以在这里查找 http://getbootstrap.com/css/#responsive-utilities-classes

所以在工具栏上你应该有

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.estimatedRowHeight = 68.0
    tableView.rowHeight = UITableViewAutomaticDimension

并在下拉列表中

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

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>

Bootstrap 3 - 多种尺寸的响应能力

2 个答案: