How to change width?

Question

On click of dropdown button I want to open a dropdown exactly as wide as button itself (54px) with % content. For some reason ul opens up and its just too wide. How do I change width?

               <div class="input-group-btn">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        DKK
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu pull-right">
                        <li>
                            <button type="button" class="btn btn-default">
                                %
                            </button>
                        </li>
                    </ul>
                </div>

very basic fiddle : http://jsfiddle.net/dk2y7mxL/

Answer 1

You will need to override the dropdown-menu class. There is a min-width property set to be 160px that can be overridden with the following.

.dropdown-menu {
    min-width:0px;
}

This will cause the dropdown to be only as wide as a button with a percent symbol in it.

Answer 2

You can limit display sizes in Bootstrap by using <div class="col-xs-4"> to wrap the entire select div.