bootstrap 带标签的下拉按钮的定位

Question

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

<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 class 添加到标签）。

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

bootstrap 带标签的下拉按钮的定位

positioning of bootstrap dropdown button with labels

css

label

position

drop-down-menu

twitter-bootstrap-3

JSFIDDLE