Setting the width of a dropdown list in Bootstrap 3.0

Question

How can I set the width of a dropdown triggering button in bootstrap 3.0 to be equal to the width of the dropdown list? Similar to what is achieved when using bootstrap-sele

Answer 1

I came here looking for a solution to a similar problem, although in my case the dropdown wasn't within a col div. I wanted the dropdown button to match the width of the dropdown list, dependant on the content width of whichever was wider, similar to a select dropdown. If anyone is looking for a similar solution here it is:

.dropdown-container {
  float:right;
  height:60px;
}
.position-dropdown-controller {
  position: absolute;
  right:0;
}

.dropdown-toggle,
.dropdown-menu {
  width: 100%;
  min-width: 0;
}

.dropdown-toggle {
  text-align: right;
}

.dropdown-menu {
  height: 0;
  text-align: center;
  display: block !important;
  visibility: hidden;
  position: relative;
  float: none;
}

.open .dropdown-menu {
  display: block !important;
  visibility: visible;
  height: auto;
}


  

    

      Dropdown
      

        ...
      
    
  

In this example I wanted the dropdown floated to the right, but it can just as easily be tweaked to work however you like.