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 correctement sur des écrans plus petits que des écrans de type col-lg. Tellement efficace, ayant la classe pull-right uniquement pour col-lg-6 ...
Comment pourrais-je y parvenir?
Voici un violon: http://jsfiddle.net/thibs/Y6WPz/
Merci
Vous pouvez placer "élément 2" dans une colonne plus petite (c'est-à-dire: col-2), puis utiliser Push sur les écrans plus grands uniquement:
<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 .pull-right à l'aide 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 classe CSS .pull-right-lg CSS.
@media (min-width: 1200px) {
.pull-right-lg {
float: right;
}
}
UPDATE
Bootstrap 4 inclut floats responsive , donc dans ce cas, il vous suffirait d'utiliser float-lg-right.
Aucun CSS supplémentaire n'est requis .
Essayez cet extrait MOINS (il est créé à partir des exemples ci-dessus et des mixins de requêtes 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édia. Bootstrap 3 a déjà un ordre flottant pour les points d'arrêt des supports 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 <#cols> à quelle distance de la colonne doit se déplacer pour cette taille de grille. Poussez ou tirez à 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 indiqué ci-dessous à votre application Bootstrap active la prise en charge de
pull-{ε|sm-|md-|lg-}left
pull-{ε|sm-|md-|lg-}right
classes qui fonctionnent exactement comme le nouveau
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
pour être complet, être compatible avec
float-{ε|sm-|md-|lg-|xl-}none
de Bootstrap 4.
C'est très simple avec Sass, utilisez simplement @extend:
.pull-right-xs {
@extend .pull-right;
}
Pour ceux qui sont intéressés par 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>
Il suffit d'utiliser les classes d'utilitaires réactifs 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 écrans lg. Pour le reste, l'attribut display sera défini sur block, comme par défaut pour l'élément div. Cette approche utilise text-right class 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 et Pull pour changer l'ordre des colonnes. Vous tirez une colonne et poussez l'autre sur les gros périphériques:
<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>
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
C'est ce que j'utilise. change @ screen-md-max pour les 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;
}
}
incluez 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>