web-dev-qa-db-fra.com

Bootstrap, tirez à gauche pour les petits appareils

Je construis un site dans Bootstrap 3 . Est-il possible de faire en sorte qu'un élément utilise la classe pull-left sur des périphériques plus petits et utilise-le à droite sur des plus grands?

Quelque chose comme: tirez-gauche-sm tirez-droite-lg.

J'ai réussi à le faire avec jQuery, en prenant le redimensionnement de la fenêtre. Y-a t'il une autre possibilité? Préférez sans dupliquer le code dans un pull-x caché-x. Ou est-il considéré comme plus acceptable de dupliquer le code/contenu maintenant lorsque vous êtes réactif? 

twitter-bootstrap-3
34
Christoffer Eklund

Vous pouvez utiliser CSS Media Queries

l'utilisation de base sera comme ça; si vous voulez flotter à gauche sous les appareils de largeur 500px, alors

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}
29
palerdot

Ajoutez simplement ceci à votre fichier SASS: 

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

@media (min-width: $screen-lg-min) {
    .pull-lg-left {
        float: left;
    }
    .pull-lg-right {
        float: right;
    }
}

Insérez les valeurs px réelles pour $screen-* si vous utilisez bien sûr du CSS simple.

HTML: 

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>
59
Alex

Il n'est pas nécessaire de créer votre propre classe avec des requêtes multimédia. Bootstrap 3 a déjà un ordre flottant pour les points d'arrêt des supports sous Ordre des colonnes .

La syntaxe de la classe est col-<#grid-size>-(Push|pull)-<#cols> où <#grid-size> est xs, sm, md ou lg et <#cols> indique la distance que vous souhaitez que la colonne se déplace pour cette taille de grille. Poussez ou tirez à gauche ou à droite, bien sûr.

Je l'utilise tout le temps, donc je sais que cela fonctionne bien.

7
Quinn

Vous pouvez éventuellement utiliser l'ordre des colonnes . 

<div class="row">
  <div class="col-md-9 col-md-Push-3">.col-md-9 .col-md-Push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

On dirait que les colonnes flottantes seront ajoutées à la version 4 par @Alex - https://github.com/twbs/bootstrap/issues/13690

3
John Magnolia

Oui. Créez votre propre style. Je ne sais pas quel élément vous souhaitez faire flotter à gauche/à droite, mais créez un fichier application.css et créez une classe CSS pour celui-ci:

/* default, mobile-first styles */
.logo {
    float: left;
}

/* tablets and upwards */
@media (min-width: 768px) {
    .logo {
        float: right;
    }
}

N'ayez pas peur d'écrire des CSS personnalisés. Bootstrap est censé être exactement cela: un bootstrap, un point de départ.

2
Martin Bean

C'est ce que j'utilise. changez @ screen-xs-max pour les autres tailles

/* Pull left in mobile resolutions */
@media (max-width: @screen-xs-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}
0
aWebDeveloper

MOINS version de la réponse de @ Alex

@media (max-width: @screen-xs-max) {
    .pull-xs-left {
        .pull-left();
    }

    .pull-xs-right {
        .pull-right();
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .pull-sm-left {
        .pull-left();
    }

    .pull-sm-right {
        .pull-right();
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .pull-md-left {
        .pull-left();
    }

    .pull-md-right {
        .pull-right();
    }
}

@media (min-width: @screen-lg-min) {
    .pull-lg-left {
        .pull-left();
    }

    .pull-lg-right {
        .pull-right();
    }
}
0
petrosmm