How to make a bootstrap popup to fill the entire column width

Question

By default, the drop-down menu in the bootstrap dynamically depends on the length of the text of the selected item. This will upset the harmony of my layout and I will not be able to find a solution.

Basically, I want the string to contain the search input, and dropbox on the right side. Something very simple ... How to make this possible?

<div class="container-fluid"> <div class="row" id="searchAndLogin"> <div class="col-md-9"> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-btn"> <button class="btn btn-default" type="button">Go!</button> </span> </div> </div> <div class="col-md-3"> <div class="btn-group"> <button type="button" class="btn btn-default">Action</button> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </div> </div> </div> 

Answer 1

You can set the width of the btn-group elements and its btn , as well as the dropdown-menu , so that it matches the width of the column in which you put it.

CSS

 #searchAndLogin .btn-group {width:100%;} #searchAndLogin .btn-group .btn {width:90%;} #searchAndLogin .btn-group .btn.dropdown-toggle {width:10%;} #searchAndLogin .btn-group .dropdown-menu {width:100%;} 

Here's a live example: http://www.bootply.com/WPhb5tLZmh