预设带有文本区域的下拉菜单

Question

我想在textarea中添加一个下拉菜单，当我使用基本的输入文本时它正在工作但是有一个文本区域，如本例所述，它不起作用：

<div class="input-group">
  <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span>server file</span>
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#">server file</a></li>
      <li><a href="#">local file</a></li>
      <li><a href="#">url</a></li>
    </ul>
   </div>
   <textarea style="resize:none" class="form-control"></textarea>
</div>

http://jsfiddle.net/fvs7t5g6/1/

有可能吗？ 谢谢你的帮助

Answer 1

Bootstrap输入组不支持<textarea>，因此您需要自定义样式来创建此类窗口小部件。

参考文献：

  

.input-group contains a <textarea>; only text-based <input>s are permitted in an .input-group

  

Textual <input>s only

     

[...]
  避免在此使用<textarea>元素[...]

Answer 2

您需要遵循bootstrap列结构来实现此目的。下面是一个简单的小提琴，它将指导你正确的方向。

<div class="row">
    <div class="col-xs-2">
       Your Drop down Code
    </div>
    <div class="col-xs-2">
       Your Textarea Code
    </div>
</div>

小提琴链接：

http://jsfiddle.net/kiranvarthi/8h72hzn7/