Bootstrap Drop-Down und Button in Gruppe

Question

Ich möchte den Code unten haben, um wie das Bild mit Bootstrap 3.3 aussehen. Wenn nicht genügend Platz vorhanden ist, um alle Elemente in einer Zeile anzuzeigen, sollten sie eine vertikale Gruppe bilden, in der die Elemente die gesamte Bildschirmbreite verwenden.

Zusatz: Meine Combo-Boxen können ihre Größe ändern und ich möchte die abgerundeten Ecken von Bootstrap an allen Ecken verwenden.

image

<div> 
    <select> 
    <option>Opt1</option> 
    <option>Opt2</option> 
    </select> 
    <select> 
    <option>Opt1</option> 
    <option>Opt2</option> 
    </select> 
    <button>Button</button> 
</div> 

Answer 1

können Sie einfach Medien Abfrage betrachten. Hier ein Beispiel:

div { 
 
text-align:center; 
 
} 
 
select, 
 
button { 
 
    max-width: 120px; 
 
    width: 100%; 
 
} 
 

 
@media all and (max-width:420px) { 
 
    select, 
 
    button { 
 
    max-width:100%; 
 
    display: block; 
 
    } 
 
}

<div> 
 
    <select> 
 
    <option>Opt1</option> 
 
    <option>Opt2</option> 
 
    </select> 
 
    <select> 
 
    <option>Opt1</option> 
 
    <option>Opt2</option> 
 
    </select> 
 
    <button>Button</button> 
 
</div>

Answer 2

<div> 
 
    <select 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"> 
 
     <option><li><a href="#">Action</a></li></option> 
 
     <option><li><a href="#">Another action</a></li></option> 
 
     <option><li><a href="#">Something else here</a></li></option> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
     </ul> 
 
    </select> 
 
<button class="btn btn-primary butn"> 
 
Button 
 
    </button> 
 
</div>

Wenn Sie ein Dropdown-Menü mit Bootstrap erstellen möchten, versuchen Sie diesen Code-Format. Das Bootstrap-Snippet für die Schaltfläche wird ebenfalls hinzugefügt.

<div> 
    <select 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"> 
     <option><li><a href="#">Action</a></li></option> 
     <option><li><a href="#">Another action</a></li></option> 
     <option><li><a href="#">Something else here</a></li></option> 
     <li role="separator" class="divider"></li> 
     <li><a href="#">Separated link</a></li> 
     </ul> 
    </select> 
<button class="btn btn-primary butn"> 
Button 
    </button> 
</div>