Bootstrap 3: tirez à droite pour col-lg uniquement


127

Nouveau sur bootstrap 3 .... Dans ma mise en page, j'ai:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right">
            elements 2
         </div>
    </div>
</div>

Je voudrais que les «éléments 2» ne soient PAS alignés directement sur des écrans plus petits que col-lg. Donc effectivement avoir la classe pull-right uniquement pour col-lg-6 ...

Comment pourrais-je y parvenir?

Voici un violon: http://jsfiddle.net/thibs/Y6WPz/

Je vous remercie



C'est donc maintenant une chose dans Bootstrap 4 . Il suffit d' utiliser order-lg-1, order-lg-2, etc.on vos colonnes.
limfinity

Réponses:


156

Vous pouvez mettre «élément 2» dans une colonne plus petite (c'est-à-dire:) col-2, puis utiliser pushuniquement sur des écrans plus grands:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Démo: http://bootply.com/88095

Une autre option consiste à remplacer le flottant de l' .pull-rightutilisation d'une requête @media.

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Enfin, une autre option consiste à créer votre propre .pull-right-lgclasse CSS.

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

METTRE À JOUR

Bootstrap 4 comprend des flotteurs réactifs , donc dans ce cas, vous utiliserez simplement float-lg-right.
Aucun CSS supplémentaire n'est nécessaire .

Démo Bootstrap 4


merci pour cela, mais le contenu doit utiliser les 6 cols complets sinon il s'enroule, ce que nous ne voulons pas.
Thibs

espérait ne pas avoir de requête médiatique, mais il le fera. Merci
Thibs

28

Essayez cet extrait de code LESS (il est créé à partir des exemples ci-dessus et des mixins de requête multimédia dans grid.less).

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

Creusez cette solution ty!
Pez

3
Cela devrait être ajouté dans bootstrap.
Lorem Ipsum Dolor

20
.pull-right-not-xs, .pull-right-not-sm, .pull-right-not-md, .pull-right-not-lg{
    float: right;
}

.pull-left-not-xs, .pull-left-not-sm, .pull-left-not-md, .pull-left-not-lg{
    float: left;
}
@media (max-width: 767px) {    
    .pull-right-not-xs, .pull-left-not-xs{
        float: none;
    }
    .pull-right-xs {
        float: right;
    }
    .pull-left-xs {
        float: left;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .pull-right-not-sm, .pull-left-not-sm{
        float: none;
    }
    .pull-right-sm {
        float: right;
    }
    .pull-left-sm {
        float: left;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .pull-right-not-md, .pull-left-not-md{
        float: none;
    }
    .pull-right-md {
        float: right;
    }
    .pull-left-md {
        float: left;
    }
}
@media (min-width: 1200px) {
    .pull-right-not-lg, .pull-left-not-lg{
        float: none;
    }
    .pull-right-lg {
        float: right;
    }
    .pull-left-lg {
        float: left;
    }
}

Bien, cela devrait faire partie du Bootstrap par défaut!
Owen

12

Il n'est pas nécessaire de créer votre propre classe avec des requêtes multimédias. Bootstrap 3 a déjà un ordre flottant pour les points d'arrêt des médias sous Ordre des colonnes: http://getbootstrap.com/css/#grid-column-ordering

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

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


3

Fonctionne bien aussi:

/* small screen portrait */

@media (max-width: 321px) {

  .pull-right { 
    float: none!important; 
  }

}


/* small screen lanscape */

@media (max-width: 480px) {

  .pull-right {
    float: none!important; 
  }

}

3

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

pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right

des classes qui fonctionnent exactement comme les nouvelles

float-{ε|sm-|md-|lg-|xl-}left
float-{ε|sm-|md-|lg-|xl-}right

classes qui ont été introduites dans Bootstrap 4:

@media (min-width: 768px) {
    .pull-sm-left {
        float: left !important;
    }
    .pull-sm-right {
        float: right !important;
    }
    .pull-sm-none {
        float: none !important;
    }
}
@media (min-width: 992px) {
    .pull-md-left {
        float: left !important;
    }
    .pull-md-right {
        float: right !important;
    }
    .pull-md-none {
        float: none !important;
    }
}
@media (min-width: 1200px) {
    .pull-lg-left {
        float: left !important;
    }
    .pull-lg-right {
        float: right !important;
    }
    .pull-lg-none {
        float: none !important;
    }
}
.pull-none {
    float: none !important;
}

En dehors de cela, il ajoute

pull-{ε|sm-|md-|lg-}none

par souci d'exhaustivité, étant compatible avec

float-{ε|sm-|md-|lg-|xl-}none

à partir de Bootstrap 4.


2

Pour ceux qui s'intéressent à l'alignement du texte, une solution simple consiste à créer une nouvelle classe:

.text-right-large {
    text-align: right;
}
@media (max-width: 991px) {
    .text-right-large {
        text-align: left;
    }
}

Ajoutez ensuite cette classe:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right-large">
        elements 2
    </div>
</div>

2

C'est très simple d'utiliser Sass, il suffit d'utiliser @extend:

.pull-right-xs { 
    @extend .pull-right;
 }

1

C'est ce que j'utilise. change @ screen-md-max pour d'autres tailles

/* Pull left in lg resolutions */
@media (min-width: @screen-md-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;
    }
}


1

Utilisez simplement les classes utilitaires réactives de bootstrap!

La meilleure solution pour cette tâche consiste à utiliser le code suivant:

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6 text-right">
        <div class="visible-lg-inline-block visible-md-block visible-sm-block visible-xs-block">
            elements 2
        </div>
    </div>
</div>

L'élément sera aligné à droite uniquement sur les lgécrans - sur le reste, l' displayattribut sera défini blockcomme par défaut pour l' divélément. Cette approche utilise la text-rightclasse sur l'élément parent au lieu de pull-right.

Solution alternative:

Le plus gros inconvénient est que le code html à l'intérieur doit être répété deux fois.

<div class="row">
    <div class="col-lg-6 col-md-6">elements 1</div>
    <div class="col-lg-6 col-md-6">
         <div class="pull-right visible-lg">
            elements 2
         </div>
         <div class="hidden-lg">
            elements 2
         </div>
    </div>
</div>

1

Vous pouvez utiliser push and pull pour modifier l'ordre des colonnes. Vous tirez une colonne et poussez l'autre sur de gros appareils:

<div class="row">
    <div class="col-lg-6 col-md-6 col-lg-pull-6">elements 1</div>
    <div class="col-lg-6 col-md-6 col-lg-push-6">
         <div>
            elements 2
         </div>
    </div>
</div>

0

inclut maintenant bootstrap 4:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css');

et le code devrait être comme ceci:

<div class="row">
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">elements 1</div>
    <div class="col-lg-6 col-md-6" style="border:solid 1px red">
         <div class="pull-lg-right pull-xl-right">
            elements 2
         </div>
    </div>
</div>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.