jquery - bootstrap 的分段按钮下拉列表在 firefox 27.0.1 中不起作用

Question

我正在尝试使用 bootstrap 的分段按钮设置一个简单的搜索字段(请参阅 http://getbootstrap.com/components/#input-groups-buttons-segmented 中的示例)。

我的代码如下所示，可在 jsfiddle http://jsfiddle.net/jwayne2978/E2ACU/ 获取.

<div style="width:500px; margin:auto">
  <div class="input-group">
    <input type="text" class="form-control input-sm">
    <div class="input-group-btn">
        <button type="button" class="btn btn-default btn-sm">Search</button>
        <button type="button" class="btn btn-default dropdown-toggle btn-dropdown" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">option 1</a></li>
            <li><a href="#">option 2</a></li>
            <li><a href="#">option 3</a></li>
        </ul>
    </div>
  </div>
</div>

问题是这个html代码适用于chrome v33.0.x.y和ie v10，但不适用于firefox v27.0.1。

在 Firefox 中，下拉列表不是出现在右侧下拉按钮的正下方，而是出现在左侧搜索字段的下方。

知道发生了什么吗？如有任何帮助，我们将不胜感激。

Answer 1

您缺少下拉列表的pull-right 类。应该是:

<ul class="dropdown-menu pull-right" role="menu">

<强> Demo

添加该类后，Bootstrap 将应用以下样式:

.dropdown-menu.pull-right {
  right: 0;
  left: auto;
}

注意 - 我也向您的下拉切换添加了一个 btn-sm 类以将其对齐。