Twitter Bootrap 3 - Wie kann ich von einer horizontalen Schaltflächengruppe zu einer vertikalen Schaltflächengruppe basierend auf der Bildschirmgröße wechseln?

Question

Ich habe eine horizontale Tastengruppe, die ich möchte, dass es zu einer vertikalen Tastengruppe mit der Bildschirmgröße wird extra klein (-xs) wechseln. Gibt es eine Möglichkeit, das mit Bootstrap 3-Klassen zu tun?

Answer 1

jquery Verwenden der Fenstergröße zu erfassen und die Klasse des Menüs anpassen entsprechend:

<div class="btn-group" id="responsive"> 
    <button class="btn">Hello</button> 
    <button class="btn">World</button> 
</div> 

<script> 
$(window).resize(function() { 
    if ($(window).width() < 408) { 
    $('#responsive').removeClass('btn-group'); 
    $('#responsive').addClass('btn-group-vertical'); 
    } else { 
    $('#responsive').addClass('btn-group'); 
    $('#responsive').removeClass('btn-group-vertical'); 
    } 
}); 
</script> 

Mit reinem Bootstrap Sie zwei Menüs machen würde: eine horizontale und eine vertikale:

<div class="btn-group hidden-xs"> 
    <button class="btn">Hello</button> 
    <button class="btn">World</button> 
</div> 

<div class="btn-group-vertical visible-xs"> 
    <button class="btn">Hello</button> 
    <button class="btn">World</button> 
</div> 

In einer idealen Welt würden Sie dies nur mit Medienabfragen in css tun, aber das Hinzufügen von benutzerdefinierten Medienabfragen zum Bootstrap kann etwas komplexer sein.

Answer 2

Wenn Sie den von Duvrai vorgeschlagenen reinen Bootstrap-Ansatz verwenden und Razor in ASP.NET verwenden, können Sie die wörtliche Duplizierung von Code umgehen, indem Sie einen @Helper erstellen, der wiederverwendet werden kann. Als solches ist das Beispiel bereitgestellt werden würde

@helper ReusedBlock(string clazz){ 
<div class="@clazz"> 
    <button class="btn">Hello</button> 
    <button class="btn">World</button> 
</div> 
} 

und dann wäre es einfach so Dies ist

@ReusedBlock("btn-group hidden-xs") 
@ReusedBlock("btn-group-vertical visible-xs") 

verwendet werden, besonders nützlich, wenn die wiederverwendet Block komplex und macht den Code sauberer und leichter zu verstehen und pflegen.

Hinweis: Sie können eine beliebige Anzahl von Argumenten an den definierten Helper übergeben, Sie müssen sie nur in die Definition aufnehmen.