Twitter Bootstrap - Wie bekommen Tasten Blockebene werden nur auf besonders kleine und kleine Geräte

Question

Ich habe folgende HTML:

<a href="javascript:void(0)" class="btn btn-primary btn-block">Start</a> 

Dies funktioniert gut, aber ich möchte nicht auf die Schaltfläche über strecken der Bildschirm auf mittleren und großen Geräten (im Wesentlichen Desktops). Gibt es eine Möglichkeit, dies mit Bootstrap out of the box zu erreichen?

Answer 1

Responsive CSS.

Sie können die maximale Breite und/oder Höhe eines beliebigen Abschnitts von CSS mit @media Tags definieren, wie in der bootstrap-responsive.css. Hier ist ein Beispiel.

@media (min-width: 400px) and (max-width: 600px) { 
    /* Code here */ 
} 

Dieser Code wird auf alle Geräte mit einer Mindestbreite des Browserfensters von 400 Pixel und maximal 600 Pixeln angewendet.

Sie den Code greifen kann für btn, btn-primary und btn-block von bootstrap.css oder Bootstrap-responsive.css (Einige ansprechenden Beispiele dort), und steckt es in einem <style></style> Tag oder in einer separaten CSS-Datei, und bearbeiten entsprechend mit reaktionsfähigem CSS.

Answer 2

Ich erreichte ein ähnliches Verhalten bei gleichzeitiger Vermeidung von Code-Duplikation mit der .btn-block Klasse als Mixin. Hier ist der entsprechende less Code:

@import (reference) "node_modules/bootstrap/less/mixins.less"; 
@import (reference) "node_modules/bootstrap/less/variables.less"; 
@import (reference) "node_modules/bootstrap/less/buttons.less"; 

@media only screen and (max-width: @screen-xs-min) { 
    .btn-block-xs { 
    .btn-block; 
    } 
} 

Die btn-block-xs Klasse wie btn-block verhalten wird aber nur für Bildschirm von width <= @screen-xs-min.