CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Brian
Brian

Reputation: 1469

How to line up the contents of drop down with the button - bootstrap

I am trying to do something that I would expect to be pretty straightforward. I simply want to have a drop down list centered on the page. THe problem is when it is expanded the contents are not lined up with the button. Here is the example: http://jsfiddle.net/VCsAW/1/

Upvotes: 0

Views: 1327

Answers (1)

My Head Hurts
My Head Hurts

Reputation: 37665

In the CSS add the following:

#settings {
    display: inline-block;
}

This will force the #settings div to fit to the size of the contents and resolve the 'offset' dropdown

Working example: http://jsfiddle.net/VCsAW/8/

Edit

The reason the contents are centered is due to the text-align: center being used to center the dropdown menu. To stop this from happening in the contents of the dropdown menu, you can just set text-align: center in .dopdown-menu:

.dropdown-menu {
     text-align: left;    
}

Working example: http://jsfiddle.net/VCsAW/12/

Upvotes: 1

Related Questions