Question

我正在尝试使用bootstrap的segemented按钮设置一个简单的搜索字段（请参阅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和即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课程，以便将其排成一行。

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

1 个答案: