Twitter Bootstrap - Come arrivare pulsanti da livello di blocco solo sulle piccole e piccoli dispositivi aggiuntivi

Question

ho il seguente codice HTML:

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

Questo funziona bene, però, non voglio che il pulsante di allungare in tutta lo schermo su dispositivi di medie e grandi dimensioni (essenzialmente desktop). C'è un modo per ottenere questo fuori dalla scatola con Bootstrap?

Answer 1

Responsive CSS.

È possibile definire la larghezza massima e/o l'altezza di qualsiasi sezione di CSS con i tag @media, come nel file bootstrap-responsive.css. Ecco un esempio.

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

Tale codice verrà applicato a tutti i dispositivi con una larghezza minima della finestra del browser di 400 pixel e un massimo di 600 pixel.

Si può prendere il codice per btn, btn-primary e btn-block da bootstrap.css o bootstrap-responsive.css (Alcuni esempi reattivi in ​​là), e metterlo in un tag <style></style> o in un file CSS separato, e modificarlo di conseguenza con CSS reattivo.

Answer 2

Ho raggiunto un comportamento simile evitando la duplicazione del codice utilizzando la classe .btn-block come mixin. Ecco il codice corrispondente less:

@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; 
    } 
} 

La classe btn-block-xs si comporterà come btn-block ma solo per lo schermo di width <= @screen-xs-min.