Bootstrap, tirer à gauche pour les petits appareils

Je suis en train de construire un site dans le Bootstrap 3.
Est-il de toute façon à en faire un élément d'utiliser la classe pull-gauche sur les appareils de petite taille et de l'utilisation de pull-droit sur les plus grandes?

Quelque chose comme: pull-gauche-sm pull-droit-lg.

J'ai réussi à le faire avec jquery, attraper le redimensionnement de la fenêtre. Est-il un autre moyen? Pref sans dupliquer le code caché dans un-x tirez-gauche. Ou est-il considéré comme plus ok pour dupliquer le code/contenu maintenant, quand on va sensible?

InformationsquelleAutor Christoffer Eklund | 2013-08-20
  1. 29

    Vous pouvez utiliser CSS Media Queries

    d'utilisation de base sera comme cela, si vous voulez faire flotter à gauche en dessous des appareils d'une largeur de 500 px, puis

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

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}
    • Cela a fonctionné pour moi, mais avec bootstrap 3, j'ai changé le 500px et 501px à 767px et 768px
    • Bootstrap 3 comprend souhaité classes: utilisez la colonne "commande". E. g. "col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4". getbootstrap.com/css/#grid-column-ordering
    • cela ne fonctionnera pas dans le bootstrap cause de bootstrap à l'aide !important
    InformationsquelleAutor palerdot
  2. 59

    Juste ajouter 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érer réelle px valeurs pour $screen-* si vous utiliser du CSS bien sûr.

    HTML: 

    <div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>
    • comment cela pourrait-il être ajusté à suivre la façon dont les colonnes sont-elles traitées? I. e. nommage de la taille de l'écran que vous souhaitez cibler et il flotte pour que la taille ET le HAUT. Serait il vous suffit de retirer le max-width paramètres sur chaque support de définition? Je l'ai fait mais je voulais un deuxième avis si c'était la meilleure méthode.
    • Bootstrap 3 comprend le désiré des classes: l'utilisation de la colonne "commande". E. g. "col-md-9 col-md-pull-3 col-lg-8 col-lg-push-4". getbootstrap.com/css/#grid-column-ordering
    • Oui, c'est la façon de le faire. En outre, vous pouvez déposer le @media (max-width: $screen-xs-max) {} condition puisque c'est la valeur par défaut, de toute façon. Vous pouvez même laisser tomber les règles pour .pull-xs-left et .pull-xs-right complètement parce qu'ils sont redondants, étant donné que la plaine .pull-left et .pull-right existent encore.
    InformationsquelleAutor Alex
  3. 7

    Il n'est pas nécessaire de créer votre propre classe avec les media queries. Bootstrap 3 a déjà flotteur de commande pour les médias, les points d'arrêt en vertu de l' Colonne De Commande.

    La syntaxe de la classe est col-<#grid-size>-(push|pull)-<#cols> où <#grid-size> est xs, sm, md ou lg et <#cols> c'est la façon dont vous voulez la colonne à déplacer pour que la taille de la grille. Poussez ou tirez de gauche ou de droite, bien sûr.

    Je l'utilise tout le temps donc je sais que ça fonctionne bien.

    • Voici un court exemple: <div class="col-xs-12-pull-left">
    • mais ton exemple ne marche pas? .col-xs-push-6 est-à gauche: 50%, cela fonctionne pour les relative ou absolue éléments positionnés et par exemple si je veux tirer à gauche sur le bureau mais la centre de sur mobile j'ai encore besoin de transformer: translateX(-50%); à l'intérieur de l'élément. Si je comprends ce droit...
    InformationsquelleAutor Quinn
  4. 3

    Peut-être vous pouvez utiliser colonne de commande. 

    <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>

    Ressemble flottant colonnes vont être ajoutées à la version 4 par @Alex a fait - https://github.com/twbs/bootstrap/issues/13690

    InformationsquelleAutor John Magnolia
  5. 2

    Oui. Créer votre propre style. Je ne sais pas quel élément vous êtes en train de flotter à gauche/droite, mais créer un application.css fichier et de créer une classe CSS pour elle:

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

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

    Ne pas avoir peur d'écrire CSS personnalisé. Bootstrap est destiné à être exactement cela: une amorce, un démarreur point.

    • Une raison quelconque vous avez choisi la réponse au mien?
    • Non, pas de raison. Ils avaient l'air très similaire alors j'ai pris le premier. Cela ne change pas le fait que je suis toujours très heureux de votre réponse et si je pouvais choisir le vôtre aussi, je le ferais. N'a pas meen ne manque de respect à personne, mon appologies si je l'ai fait.
    • Cela résout le problème, mais pas de réponse dans le contexte. Bien sûr, nous pouvons écrire la coutume. Mais le contexte est si vous pouvez le faire avec le standard de bootstrap classes.
    InformationsquelleAutor Martin Bean
  6. 0

    C'est ce que j'utilise . modification @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;
    }
}
    InformationsquelleAutor aWebDeveloper
  7. 0

    MOINS la version de @Alex réponse

    @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();
    }
}
    InformationsquelleAutor petrosmm