使用文本框将引导程序下拉列表调整为内容宽度

时间:2018-07-16 05:52:50

标签: jquery css html5 twitter-bootstrap-3

我在引导下拉菜单中附加了一个小提琴。下拉菜单的顶部是输入文本。 如何调整文本框和下拉容器的宽度以适合内容大小?例如我有一长串文字“沥青铺设机LOOOOOOOOOOOOOONG”。内容不应该包装。

当然必须有最大宽度。

<div class="editableDropdown input-group">
<input type="text" class="col-md-3 gui-input" name="load" id="load"/>
<div style="display:inline-block; width:10px">
    <button type="button" class="btn btn-default dropdown-toggle"
        data-toggle="dropdown" style="width:20px">
        <span class="glyphicon glyphicon-menu-up"></span><span
            class="glyphicon glyphicon-menu-down"></span>
    </button>
    <ul id="color-dropdown-menu"
        class="dropdown-menu dropdown-menu-right scrollable-menu" role="menu">
        <li>Select / Enter Load</li>
        <li>ARTICULATED DUMP TRUCK</li>
   </ul>
</div>

https://jsfiddle.net/haribalaji/jk9x07dr/46/

1 个答案:

答案 0 :(得分:1)

它认为“选择”组件可以解决您的问题。

  <select>
  <option>ASPHALT MILL</option>
  <option> ASPHALT LAY DOWN MACHINE "LOOOOOOOOOOOOOONG" </option>
  </select>