wake-up-neo.net

Festlegen der Breite einer Dropdown-Liste in Bootstrap 3.0

Wie kann ich die Breite einer Dropdown-Schaltfläche in Bootstrap 3.0 so einstellen, dass sie der Breite der Dropdown-Liste entspricht? Ähnlich wie bei der Verwendung von bootstrap-select ( http://silviomoreto.github.io/bootstrap-select/ ). Ich habe versucht, die ganze Liste in ein div mit einer col * -Klasse zu packen, aber das scheint nicht zu funktionieren:

<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>

Daher möchte ich: button width = Dropdown-Menüliste = col- * width.

37
graphmeter

Ich habe die Lösung gefunden, indem ich das Dropdown-Menü und die Tastenbreite auf 100% gesetzt habe.

.dropdown-menu {
  width: 100%; 
}

.btn{
 width: 100%;
}

Jetzt haben sowohl die Schaltfläche als auch die Dropdown-Liste dieselbe Breite, die von der Spaltenbreite gesteuert wird.

38
graphmeter

Wenn ich richtig verstanden habe, dass Sie die Menübreite entsprechend der größeren Option gestalten möchten, müssen Sie die min-width-Eigenschaft der .dropdown-menu-Liste wie folgt überschreiben:

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

Demo: http://jsfiddle.net/faxyz/4/

27
Irvin Dominin

Sie können die Breite von .dropdown-toggle. einstellen. Ich empfehle, text-overflow Ellipsis zu verwenden, wenn das Dropdown-Menü zu klein wird. Es ist nicht notwendig, .dropdown-menu zu formatieren. Sie können die Breite der Dropdown-Liste auf einen anderen Wert festlegen, wenn Sie sie in .input-group verwenden möchten oder nicht im Raster.

.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

Ich kam hierher und suchte nach einer Lösung für ein ähnliches Problem, obwohl in meinem Fall das Dropdown nicht innerhalb eines Col div lag. Ich wollte, dass die Dropdown-Schaltfläche mit der Breite der Dropdown-Liste übereinstimmt, abhängig von der Breite des Inhalts, der breiter ist, ähnlich wie bei einer Auswahl-Dropdown-Liste. Wenn hier jemand nach einer ähnlichen Lösung sucht, ist es:

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

In diesem Beispiel wollte ich, dass das Dropdown-Fenster nach rechts verschoben wurde, aber es kann genauso einfach angepasst werden, um so zu funktionieren, wie Sie möchten.

0
partypete25