Bootstrap 3: tirez à droite pour col-lg uniquement

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

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

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

.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;
    }
}

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.

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

}

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.

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>

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

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

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

Ce problème est résolu dans bootstrap-4-alpha-2.

Voici le lien: http://blog.getbootstrap.com/2015/12/08/bootstrap-4-alpha-2/

Clonez-le sur github: https://github.com/twbs/bootstrap/tree/v4.0.0-alpha.2

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>

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>

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>