引导下拉菜单的宽度

Question

我正在尝试使用 bootstrap css 制作带有下拉菜单的搜索控件。我尝试为菜单提供 100% 的宽度，但它只是为其添加了滚动条。有没有办法让菜单的宽度等于文本框。我不能使用静态宽度，因为页面将是响应式的，并且将使用不同的设备进行查看。

小提琴链接：https://jsfiddle.net/ff0j7wjh/

HTML：

<div class=" col-lg-12">
  <div class="input-group">
    <input id="searchBox" type="text" class="form-control" aria-label="...">
    <div id="searchDrop" class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        .
        .
        .
      </ul>
    </div>
  </div>
</div>

JS：

$("#searchBox").click(function(e) {
  $("#searchDrop").toggleClass("open");
  e.stopPropagation();
});

Answer 1

请试试这个。

.custom-drop .input-group-btn{
  position:static;
}
.custom-drop ul {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class=" col-lg-12 custom-drop">
  <div class="input-group">
    <input id="searchBox" type="text" class="form-control" aria-label="...">
    <div id="searchDrop" class="input-group-btn">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button>
      <ul class="dropdown-menu dropdown-menu-right" style="height:100px; overflow-y: scroll">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
      </ul>
    </div><!-- /btn-group -->
  </div>
</div>