Bootstrap 3: pull-right for col-lg only

Question

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

    éléments 1

            éléments 2

Je voudrais que les 'éléments 2' ne soient pas alignés à droite sur des écrans plus petits que col-lg. Donc effectivement avoir la classe pull-right seulement pour col-lg-6...

Comment pourrais-je y parvenir ?

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

Merci

Answer 1

Ajouter le CSS indiqué 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 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 outre, cela ajoute

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

pour la complétude, étant compatible avec

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

de Bootstrap 4.

Answer 2

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

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

Ensuite, ajoutez cette classe :

    éléments 1

        éléments 2

Answer 3

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

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

Answer 4

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

/* Aligner à gauche dans les résolutions LG */
@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;
    }
}

Answer 5

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