Twitter Bootstrap带有下拉列表的内联输入

时间:2012-08-16 02:06:46

标签: html twitter-bootstrap textinput

我正在尝试使用下拉按钮显示内联文本输入。我无法弄清楚如何做到这一点。这是我尝试过的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>

这可能吗?

谢谢

5 个答案:

答案 0 :(得分:61)

当前状态:docs中的默认实现

目前文档here中有一个输入+下拉组合的默认实现(搜索“按钮下拉列表”)。我保留原始解决方案以供记录,以及那些现在不能使用解决方案的人员。

原始解决方案

是的,有可能。事实上,the Twitter Bootstrap documentation中有一个示例(按照链接并在下拉按钮中搜索“示例”):

<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>

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

Twitter Bootstrap dropdown button within text

修改

如果您尝试使用附加下拉菜单实现<input>,如下拉按钮,那么这是解决方案之一:

  1. btn-group类添加到具有input-append
  2. 的元素
  3. 使用类dropdown-toggle
  4. 在元素末尾添加类dropdown-menuinput-append的元素
  5. 覆盖元素匹配.input-append .btn.dropdown-menu的样式,因此它没有float: left(否则它会进入下一行)。
  6. 生成的代码可能如下所示:

    <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;
    }
    

    并给出与此完全相同的结果:

    enter image description here

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

答案 1 :(得分:13)

从Bootstrap 3.x开始,这里的文档中有一个例子:http://getbootstrap.com/components/#input-groups-buttons-dropdowns

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action <span class="caret"></span></button>
    <ul class="dropdown-menu dropdown-menu-right" role="menu">
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li class="divider"></li>
      <li><a href="#">Separated link</a></li>
    </ul>
  </div><!-- /btn-group -->
</div><!-- /input-group -->

答案 2 :(得分:4)

这是我的解决方案是使用显示:内联

Some text <div class="dropdown" style="display:inline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div> is here

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />Your text
<div class="dropdown" style="display: inline">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>is here
&#13;
&#13;
&#13;

答案 3 :(得分:3)

Daniel Farrell's Bootstrap Combobox完美地完成了这项工作。这是他的GitHub存储库中的一个例子。

&#13;
&#13;
$(document).ready(function(){
  $('.combobox').combobox();
  
  // bonus: add a placeholder
  $('.combobox').attr('placeholder', 'For example, start typing "Pennsylvania"');
});
&#13;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/css/bootstrap-combobox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-combobox/1.1.8/js/bootstrap-combobox.min.js"></script>

<select class="combobox form-control">
  <option></option>
  <option value="PA">Pennsylvania</option>
  <option value="CT">Connecticut</option>
  <option value="NY">New York</option>
  <option value="MD">Maryland</option>
  <option value="VA">Virginia</option>
</select>
&#13;
&#13;
&#13;

作为一个额外的好处,我已经在脚本中添加了一个占位符,因为将它应用于标记并不成立。

答案 4 :(得分:2)

搜索“datalist tag”

<input list="texto_pronto" name="input_normal"><datalist id="texto_pronto"><option value="texto A"><option value="texto B"></datalist>