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

Question

提问by Misha M

I'm trying to display a text input inline with a dropdown button. I can't figure out how to do this though. Here's the HTML I've tried (I've put all of it on a single line with no results):

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

Is this possible?

这可能吗？

Thank you

谢谢

Answer 1

回答by Tadeck

Current state: default implementation in docs

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

Currently there is a default implementation of input+dropdown combo in the documentation here(search for "Button dropdowns"). I leave the original solution for the record and for those who cannot use solution now included in the documentation.

当前，此处的文档中有 input+dropdown 组合的默认实现（搜索“Button dropdowns”）。我将原始解决方案留作记录，也留给那些不能使用现在包含在文档中的解决方案的人。

Original solution

原解决方案

Yes, it is possible. As a matter of fact, there is one example in the Twitter Bootstrap documentation(follow the link and search "Examples" for dropdown buttons):

对的，这是可能的。事实上，Twitter Bootstrap 文档中有一个示例（点击链接并搜索“示例”以获取下拉按钮）：

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

If enclosed within text, it can look like this (with text on the button changed, nothing else):

如果包含在文本中，它可能如下所示（按钮上的文本已更改，没有其他内容）：

Twitter Bootstrap dropdown button within text

文本中的 Twitter Bootstrap 下拉按钮

EDIT:

编辑：

If you are trying to achieve <input>with appended dropdown menu as in the dropdown buttons, then this is one of the solutions:

如果您尝试<input>使用下拉菜单中的附加下拉菜单来实现，那么这是解决方案之一：

Add a btn-groupclass to the element that has input-appendclass,
Add elements with classes dropdown-toggleand dropdown-menuat the end of the element with class input-append,
Override style for element matching .input-append .btn.dropdown-menuso it does not have float: left(otherwise it will get into next line).

btn-group向具有input-append类的元素添加一个类，
添加带有 classes 的元素，dropdown-toggle并dropdown-menu在带有 class 的元素的末尾input-append，
覆盖元素匹配的样式，.input-append .btn.dropdown-menu使其没有float: left（否则它将进入下一行）。

The resulting code may look like this:

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

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

with a little support from this style override:

在此样式覆盖的一点支持下：

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

and give you the exact same result as this:

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

enter image description here

在此处输入图片说明

EDIT 2:Updated the CSS selector (was .dropdown-menu, is .dropdown-toggle).

编辑 2：更新了 CSS 选择器（是.dropdown-menu，是.dropdown-toggle）。

Answer 2

回答by Clint Harris

As of Bootstrap 3.x, there's an example of this in the docs here: http://getbootstrap.com/components/#input-groups-buttons-dropdowns

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

Answer 3

回答by ashish bhatt

This is the code for Bootstrap with input search dropdown. I search a lot then i try its in javascript and html with bootstrap,

这是带有输入搜索下拉菜单的 Bootstrap 代码。我搜索了很多然后我用引导程序在javascript和html中尝试它，

HTML Code :

HTML代码：

<div class="form-group">
    <label class="col-xs-3 control-label">Language</label>
    <div class="col-xs-7">
        <div class="dropdown">
          <button id="mydef" class="btn dropdown-toggle" type="button" data-toggle="dropdown" onclick="doOn(this);">
            <div class="col-xs-10">
                <input type="text" id="search" placeholder="search" onkeyup="doOn(this);"></input>
            </div>
            <span class="glyphicon glyphicon-search"></span>
         </button>
      <ul id="def" class="dropdown-menu" style="display:none;" >
            <li><a id="HTML" onclick="mydef(this);" >HTML</a></li>
            <li><a id="CSS" onclick="mydef(this);" >CSS</a></li>
            <li><a id="JavaScript" onclick="mydef(this);" >JavaScript</a></li>
      </ul>
      <ul id="def1" class="dropdown-menu" style="display:none"></ul>
    </div>
</div>

Javascript Code :

Javascript代码：

function doOn(obj)
     {

        if(obj.id=="mydef")
        {
            document.getElementById("def1").style.display="none";
            document.getElementById("def").style.display="block";
        }
        if(obj.id=="search")
        {
            document.getElementById("def").style.display="none";

            document.getElementById("def1").innerHTML='<li><a id="Java" onclick="mydef(this);" >java</a></li><li><a id="oracle" onclick="mydef(this);" >Oracle</a></li>';

            document.getElementById("def1").style.display="block";
        }

    }
    function mydef(obj)
    {
        document.getElementById("search").value=obj.innerHTML;
        document.getElementById("def1").style.display="none";
        document.getElementById("def").style.display="none";
    }

You can use jquery and json code also as per your requirement.

您也可以根据需要使用 jquery 和 json 代码。

Output like:

输出如：

Answer 4

回答by Hoàng V? Tgtt

This is my solution is use display: inline

这是我的解决方案是使用 display: inline

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

a

一种

<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

Answer 5

回答by Jairo Frantiesco da Silva

Search for "datalist tag"

搜索“数据列表标签”

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

Answer 6

回答by ThisClark

Daniel Farrell's Bootstrap Comboboxdoes the job perfectly. Here's an example from his GitHub repository.

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

$(document).ready(function(){
  $('.combobox').combobox();
  
  // bonus: add a placeholder
  $('.combobox').attr('placeholder', 'For example, start typing "Pennsylvania"');
});

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

As an added bonus, I've included a placeholder in script since applying it to the markup does not hold.

作为额外的奖励，我在脚本中包含了一个占位符，因为将它应用于标记不成立。

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

提问by Misha M

回答by Tadeck

Current state: default implementation in docs

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

Original solution

原解决方案

回答by Clint Harris

回答by ashish bhatt

回答by Hoàng V? Tgtt

回答by Jairo Frantiesco da Silva

回答by ThisClark

相关推荐

最近更新

标签

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

提问by Misha M

回答by Tadeck

Current state: default implementation in docs

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

Original solution

原解决方案

回答by Clint Harris

回答by ashish bhatt

回答by Hoàng V? Tgtt

回答by Jairo Frantiesco da Silva

回答by ThisClark

相关推荐

Html 内容上方的滚动条

Html CSS - 使 SPAN 延伸到其容器的末端/填充空白空间？

Html 如何使用相对于绝对定位输入框的 css 定位标签

具有固定宽度和滚动条的 HTML 选择元素

相关推荐

最近更新

标签