Twitter Bootstrap内嵌输入和下拉菜单 [英] Twitter Bootstrap inline input with dropdown

问题描述

我正尝试显示内嵌下拉按钮的文本输入。我无法弄清楚如何做到这一点。这里是我尝试过的HTML（我把它全部放在一行中，没有结果）：

 < div class =input-append> 
< input type =textplaceholder =fooclass =input-mini> 
< div class =btn-group> 
< a id =amount_typeclass =btn dropdown-toggledata-toggle =dropdownhref =＃> 10< span class =caret>< / span>< ; / A> 
< ul id =amount_type_optionsclass =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> 
  

这可能吗？

谢谢

解决方案

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

文档这里的文档中输入+下拉组合的默认实现（搜索按钮下拉列表）。我留下了原始解决方案的记录和那些不能使用解决方案现在包含在文档中。

原始解决方案

是的，这是可能的。事实上， Twitter Bootstrap文档中有一个示例（请遵循链接和搜索下拉按钮的 Examples ）：

 < div class =btn -group> 
< a class =btn btn-primaryhref =＃> 
< i class =icon-user icon-white>< / i>用户
< / a> 
< a class =btn btn-primary dropdown-toggledata-toggle =dropdownhref =＃> 
< span class =caret>< / span> 
< / a> 
< ul class =dropdown-menu> 
< i>< a href =＃>< i class =icon-pencil>< / i>编辑< / A>< /锂> 
< i>< a href =＃>< i class =icon-trash>< / i>删除< / A>< /锂> 
< li>< a href =＃>< i class =icon-ban-circle>< / i>班< / A>< /锂> 
< li class =divider>< / li> 
< li>< a href =＃>< i class =i>< / i>制作管理员< / li>< / li> 
< / ul> 
< / div> 
  

如果封闭在文本中，它可能看起来像这样（改变按钮上的文本，没有别的） ：

p>

编辑：

如果您尝试实现< ;在下拉按钮中输入> 并附加下拉菜单，那么这是其中一个解决方案：

1. 向 input-append class，

添加一个 btn-group 类
2. 使用类下拉式切换和下拉式菜单在元素末尾添加类 input-append ，


3. 重写元素匹配样式 .input-append .btn.dropdown-menu ，所以它没有 float：left （否则它会进入下一行）。
   
   
   

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

    < div class =input-append btn-group> 
   < input class =span2id =attachedInputButtonsize =16type =text> 
   < a class =btn btn-primary dropdown-toggledata-toggle =dropdownhref =＃> 
   < span class =caret>< / span> 
   < / a> 
   < ul class =dropdown-menu> 
   < i>< a href =＃>< i class =icon-pencil>< / i>编辑< / A>< /锂> 
   < i>< a href =＃>< i class =icon-trash>< / i>删除< / A>< /锂> 
   < li>< a href =＃>< i class =icon-ban-circle>< / i>班< / A>< /锂> 
   < li class =divider>< / li> 
   < li>< a href =＃>< i class =i>< / i>制作管理员< / li>< / li> 
   < / ul> 
   < / div> 
     

   有了这种风格的一点支持覆盖：

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

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

   
   
   
   
   
   

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

   
   

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

   <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

   解决方案

   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.

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

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

   EDIT:

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

   1. Add a btn-group class to the element that has input-append class,
   2. Add elements with classes dropdown-toggle and dropdown-menu at the end of the element with class input-append,
   3. Override style for element matching .input-append .btn.dropdown-menu so it does not have float: left (otherwise it will get into next line).

   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:

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

   这篇关于Twitter Bootstrap内嵌输入和下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！