web-dev-qa-db-fra.com

Changer les boutons pour "btn-block" sur la taille de l'écran du mobile

À l’aide de Bootstrap 3, existe-t-il un moyen de faire en sorte que les boutons utilisent la classe btn-block lorsqu’une taille d’écran "xs"?

Actuellement, j'ai un formulaire qui a quelques lignes contenant 3 listes déroulantes et deux boutons, ce qui semble bien sur les grands et moyens écrans.

Lorsque le formulaire change sur de petits écrans et que les contrôles de formulaire sont forcés de s’écouler verticalement, les boutons restent de la même taille et ont l’air daft, en les poussant vers la gauche de l’écran.

Idéalement, j'aimerais pouvoir les utiliser en tant que boutons de blocage lorsque l'écran est plus petit, afin qu'ils occupent toute la largeur (du formulaire, comme le font les contrôles de formulaire) et le rendent un peu plus esthétique.

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
20
Mr Pablo

Ajoutez votre classe personnalisée au bouton et utilisez des requêtes de support pour définir la largeur à 100% sur les périphériques jusqu'au point d'arrêt. SO c'est-à-dire 

<button class"bootstrap classes custom-class></button>

et en CSS 

@media all and (max-width:480px) {
   .custom-class { width: 100%; display:block; }
}

Vous pouvez également contrôler ce qui se passe au-dessus de ce point d'arrêt en configurant des requêtes de média sur différents points d'arrêt.

30
robjez

L’ajout du CSS indiqué ci-dessous à votre Bootstrap 3 application permet de prendre en charge

.btn-xs-block
.btn-sm-block
.btn-md-block
.btn-lg-block

les classes qui fournissent des variantes de btn-block qui sont réactives et spécifiques à la taille de la fenêtre d'affichage.

Si vous avez plusieurs boutons côte à côte et qu'ils ne tiennent pas sur de petits écrans, insérez donc btn-xs-block ou btn-sm-block (ou, dans de rares cas, l'une des autres classes), être en pleine largeur et empilés sur de petits écrans:

<button class="btn btn-default btn-xs-block" type="button">Button 1</button>
<button class="btn btn-default btn-xs-block" type="button">Button 2</button>

CSS pour Bootstrap 3:

@media (max-width: 767px) {
    .btn-xs-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-xs-block,
    input[type="reset"].btn-xs-block,
    input[type="button"].btn-xs-block {
        width: 100%;
    }
    .btn-block + .btn-xs-block,
    .btn-xs-block + .btn-block,
    .btn-xs-block + .btn-xs-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .btn-sm-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-sm-block,
    input[type="reset"].btn-sm-block,
    input[type="button"].btn-sm-block {
        width: 100%;
    }
    .btn-block + .btn-sm-block,
    .btn-sm-block + .btn-block,
    .btn-sm-block + .btn-sm-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .btn-md-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-md-block,
    input[type="reset"].btn-md-block,
    input[type="button"].btn-md-block {
        width: 100%;
    }
    .btn-block + .btn-md-block,
    .btn-md-block + .btn-block,
    .btn-md-block + .btn-md-block {
        margin-top: 0.5rem;
    }
}
@media (min-width: 1200px) {
    .btn-lg-block {
        display: block;
        width: 100%;
    }
    input[type="submit"].btn-lg-block,
    input[type="reset"].btn-lg-block,
    input[type="button"].btn-lg-block {
        width: 100%;
    }
    .btn-block + .btn-lg-block,
    .btn-lg-block + .btn-block,
    .btn-lg-block + .btn-lg-block {
        margin-top: 0.5rem;
    }
}
14
caw

Pour Bootstrap 4, j'utilise ceci:

# HTML
<input type="submit" class="btn btn-primary btn-block-xs-only">

# SCSS
@include media-breakpoint-only(xs) {
  .btn-block-xs-only {
    display: block;
    width: 100%;
  }
}

Voir ici pour référence - http://v4-alpha.getbootstrap.com/layout/overview/

13
Victor

Si vous voulez utiliser uniquement les classes d'amorçage "natives", vous pouvez le faire:

<input type="submit" 
    class="btn btn-primary 
        visible-xs-block 
        visible-sm-inline-block visible-md-inline-block visible-lg-inline-block">
2
Silvio Porcellana

Vous pouvez également placer le bouton dans une grille pour ne pas avoir à écrire de css supplémentaire.

    <div class="row">
        <div class="col-12 col-md-2">
            <button type="submit" id="submit" class="btn btn-primary btn-block">submit</button>
        </div>

        <div class="col-0 col-md-10"></div>
    </div>
0
ethmz