html - 带有下拉菜单的 Twitter Bootstrap 内联输入

Question

我正在尝试显示带有下拉按钮的文本输入。我不知道该怎么做。这是我尝试过的 HTML(我将所有内容放在一行中但没有结果):

<div class="input-append">
  <input type="text" placeholder="foo" class="input-mini">
  <div class="btn-group">
    <a id="amount_type" class="btn dropdown-toggle" data-toggle="dropdown" href="#">10<span class="caret"></span></a>
    <ul id="amount_type_options" class="dropdown-menu">
      <li class="selected"><a href="#">10</a></li>
      <li><a href="#">100</a></li>
      <li><a href="#">1000</a></li>
    </ul>
  </div>
</div>

这可能吗？

谢谢

Answer 1

当前状态:文档中的默认实现

目前在文档中有一个输入+下拉组合的默认实现 here (搜索“按钮下拉菜单”)。我将原始解决方案留作记录，并留给那些不能使用现在包含在文档中的解决方案的人。

原解

是的，这是可能的。事实上，the Twitter Bootstrap documentation中就有一个例子。 (点击链接并在“Examples”中搜索下拉按钮):

<div class="btn-group">
    <a class="btn btn-primary" href="#">
        <i class="icon-user icon-white"></i> User
    </a>
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

如果包含在文本中，它可以看起来像这样(按钮上的文本已更改，没有其他内容):

编辑:

如果你想达到 <input>在下拉按钮中附加下拉菜单，那么这是解决方案之一:

1. 添加 btn-group对具有 input-append 的元素进行分类类(class)，
2. 添加具有类的元素 dropdown-toggle和 dropdown-menu在类 input-append 的元素末尾,
3. 覆盖元素匹配的样式 .input-append .btn.dropdown-menu所以它没有 float: left (否则它将进入下一行)。

生成的代码可能如下所示:

<div class="input-append btn-group">
    <input class="span2" id="appendedInputButton" size="16" type="text">
    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
        <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
        <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
        <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
        <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
        <li class="divider"></li>
        <li><a href="#"><i class="i"></i> Make admin</a></li>
    </ul>
</div>

在这种样式覆盖的支持下:

.input-append .btn.dropdown-toggle {
    float: none;
}

并为您提供与此完全相同的结果:

编辑 2: 更新了 CSS 选择器(原为 .dropdown-menu，原为 .dropdown-toggle)。