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

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Thibs
la source
3
On dirait que cela pourrait être une fonctionnalité prise en charge dans Bootstrap 4
eggy
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

Zim
la source
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;
}
}
Mark P
la source
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;
    }
}
Du Coca
la source
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>où <#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.

Quinn
la source
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; 
  }

}
Greg
la source
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.

croasser
la source
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>
Jchavannes
la source
2

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

.pull-right-xs { 
    @extend .pull-right;
 }
Rogerio Orioli
la source
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;
    }
}
aWebDeveloper
la source
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>
Luke
la source
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>
Carlos Ucha
la source
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>
Vasile
la source