Bootstrap-Schaltflächengruppe Mobile Formatierung zurücksetzen

Question

Ich verwende Bootstrap-Schaltflächengruppen zum Formatieren von Gruppen von Kontrollkästchen und Optionsfeldern auf meiner Desktop-Anzeige auf meiner Webseite. Wenn die Schaltflächengruppe jedoch auf einem mobilen Gerät angezeigt wird, sieht sie nicht korrekt aus. Ich frage mich, ob es eine einfache Möglichkeit gibt, diese Formate zu entfernen, um Standard-Kontrollkästchen und Optionsfelder anzuzeigen. Danke für Ihre Hilfe.

<div class="container"> 

<div class="col-md-6"> 
<div class="btn-group" data-toggle="buttons"> 
    <label id="label1" class="btn btn-default"> 
     <input type="checkbox" name="popcorn" value="popcorn">Popcorn</input> 
    </label> 
    <label id="label2" class="btn btn-default"> 
     <input type="checkbox" name="pictures" value="pictures">Pictures</input> 
    </label> 
    <label id="label3" class="btn btn-default"> 
     <input type="checkbox" name="events" value="events">Events</input> 
    </label> 
</div> </div></div></div> 

UPDATE: Ich glaube, ich sollte hinzufügen, dass es in den Spalten eingewickelt ist. Der Display-Inline-Vorschlag hatte keine Wirkung

Answer 1

so etwas wie das?

https://jsfiddle.net/dalinhuang/31gz6dh4/4/

.btn { 
    float: none; 
    display: inline-block; 
    overflow: hidden; 
} 

.btn-group { 
    display: flex; 
} 

oder Sie wollen Überlauf:

https://jsfiddle.net/dalinhuang/31gz6dh4/2/

oder im Zentrum:

https://jsfiddle.net/dalinhuang/31gz6dh4/3/