Установка ширины выпадающего списка в Bootstrap 3.0

Как установить ширину кнопки запуска выпадающего списка в bootstrap 3.0 равной ширине выпадающего списка? Как и при использовании bootstrap-select (http://silviomoreto.github.io/bootstrap-select/). Я попытался обернуть весь список в div с помощью класса col *, но это не работает:

<div class="row">
<div class="col-xs-4 col-md-4">
    <div class="dropdown">
      <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">Button</button>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
            <li><a href="#">Action</a></li>
          </ul>
    </div>
</div>

Таким образом, мне бы хотелось: button width = раскрывающееся меню list = col- * width.

Ответы

Ответ 1

Я нашел решение, установив выпадающее меню и ширину кнопки = 100%.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

Теперь и кнопка, и раскрывающийся список имеют одинаковую ширину, управляемую шириной столбца.

Ответ 2

Если я правильно понимаю, что вы хотите стилизовать ширину меню в соответствии с более крупным вариантом, вам необходимо переопределить свойство min-width в списке .dropdown-menu, например:

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

Демо: http://jsfiddle.net/faxyz/4/

Ответ 3

Вы можете установить ширину .dropdown-toggle. Я рекомендую использовать эллипсис text-overflow, когда выпадающее меню становится слишком маленьким. Не нужно стилить .dropdown-menu. Вы можете установить ширину выпадающего списка для любого другого значения, если вы хотите использовать его в .input-group или нет в сетке.

.dropdown-toggle {   
    overflow: hidden;
    padding-right: 24px /* Optional for caret */;
    text-align: left;
    text-overflow: ellipsis;    
    width: 100%;
}

/* Optional for caret */
.dropdown-toggle .caret {
    position: absolute;
    right: 12px;
    top: calc(50% - 2px);
}

Ответ 4

Я пришел сюда для поиска решения аналогичной проблемы, хотя в моем случае выпадающее меню не было в div div. Я хотел, чтобы кнопка раскрывающегося списка соответствовала ширине раскрывающегося списка, в зависимости от ширины содержимого, которая была более широкой, похожей на раскрывающийся список выбора. Если кто-то ищет аналогичное решение, это:

.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;
}

<div class="dropdown-container">
  <div class="position-dropdown-controller">
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span></button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        ...
      </ul>
    </div>
  </div>
</div>

В этом примере я хотел, чтобы раскрывающийся список перемещался вправо, но его можно так же легко настроить, как вам нравится.