引導程序下拉的寬度

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>