web-dev-qa-db-ja.com

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>

したがって、私はしたい：ボタンの幅=ドロップダウンメニューリスト= col- *幅。

javascripthtmlcsstwitter-bootstrap
37
graphmeter

ドロップダウンメニューとボタンの幅を100％に設定することで解決策を見つけました。

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

これで、ボタンとドロップダウンリストの両方が同じ幅になり、列の幅で制御されます。

38
graphmeter

私が正しく理解している場合、より大きなオプションに従ってメニュー幅をスタイルしたい場合は、次のようなmin-widthリストの.dropdown-menuプロパティをオーバーライドする必要があります。

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

デモ： http://jsfiddle.net/faxyz/4/

28
Irvin Dominin

.dropdown-toggle.の幅を設定できます。ドロップダウンが小さすぎる場合は、text-overflow Ellipsisを使用することをお勧めします。 .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);
}
9
Ben Besuijen

私の場合、ドロップダウンはcol 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>

この例では、ドロップダウンを右にフロートしたかったのですが、好きなように動作するように簡単に調整できます。

0
partypete25