ブートストラップドロップダウンの幅

Question

ブートストラップ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>