Question

使用bootstrap我想展示combobox哪些应展开并将其项目展示到网页的可见部分。

给出以下代码段：

<div class="row">
  <div class="col-xs-5">I contain long label</div>
  <div class="col-xs-3"></div>
  <div class="col-xs-4">
    <div class="dropdown">
      <button class="btn btn-default btn-block dropdown-toggle" type="button" data-toggle="dropdown">
        <span>Options</span>
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu">
        <li><a href="#">This is very long text which normally overlays box on right</a></li>
      </ul>
     </div>
   </div>
 </div>

jsfiddle here

当dropdown button为expanded时，它会在右侧溢出并导致scrollbar显示。如何利用左侧的自由空间 - 例如让<ul>和<li>溢出原始组合框标题，从而阻止scrollbar出现？

Answer 1

将.pull-right添加到ul.dropdown-menu应该这样做，更新小提琴http://jsfiddle.net/hku8a8nf/3/

Answer 2

只需将类下拉菜单权限添加到您的ul项目，如

<ul id="migratorAvailableBuildings" class="dropdown-menu
migratorDropDownRight dropdown-menu-right"

<强> Fiddle

如何使<li>元素的下拉列表溢出

2 个答案: