使用标签

Question

使用bootstrap 3我试图使用最终查询按钮生成一行带标签的下拉菜单。但是，由于btn-toolbar CSS，按钮浮动在标签的左侧。将btn工具栏更改为向右浮动会产生相反的查询按钮顺序，并选择标签位于正确的位置。

<div class="btn-toolbar row">

  <div class="btn-group">
    <label class="btn-label">Topic:</label>
    <button id="choose_topic_title" type="button" class="btn btn-default">Select</button>
    <button id="choose_topic" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="choose_topic_menu" class="dropdown-menu">
      <li><a href="#">all</a></li>
      <li><a href="#">weather</a></li>
      <li><a href="#">sports</a></li>
      <li><a href="#">business</a></li>
      <li><a href="#">news</a></li>
      <li><a href="#">arts</a></li>
      <li><a href="#">science</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <label for="choose_lang_title" class="control-label">Language:</label>
    <button id="choose_lang_title" type="button" class="btn btn-default">Select</button>
    <button id="choose_lang" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="caret"></span>
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="choose_lang_menu" class="dropdown-menu">
      <li><a href="#">en-us</a></li>
      <li><a href="#">es-us</a></li>
    </ul>
  </div>
  <div class="btn-group">
    <a href="#">
      <button id="query_data" type="button" class="btn btn-primary">Query</button>
    </a>
  </div>
</div>

bootstrap是否有一种简单的方法来定位标记下拉菜单的水平行？

这是一个证明问题的jsfiddle：https://jsfiddle.net/cgalles/nqmqka2e/4/

Answer 1

您可以更改标签的浮动（或者您可以将pull-left类添加到标签中）。

.btn-toolbar .btn-label {
  float: left;
}

JSFIDDLE