Décalage Bootstrap 3 à droite pas à gauche

93

En ce qui concerne BS 3, si je voulais juste une colonne étroite de contenu à droite, je pourrais utiliser une classe de décalage de 9 et une colonne de 3.

Cependant, que faire si je voulais l'inverse et sur le côté gauche? Existe-t-il un moyen approprié de le faire dans BS ou devrais-je simplement utiliser mes propres méthodes CSS? Je pensais créer une colonne de 3 avec mon contenu et juste une colonne vide de 9.

twitter-bootstrap-3 Travailler ensemble2013
la source

Réponses:

94

Les lignes Bootstrap contiennent toujours leurs flottants et créent de nouvelles lignes. Vous n'avez pas à vous soucier de remplir les colonnes vides, assurez-vous simplement qu'elles ne totalisent pas plus de 12.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column of 3
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      I'm a left column of 3
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-body">
      And I'm some content below both columns
    </div>
  </div>
</div>
Développer l'extrait

Ross Allen
la source
2
Pour une colonne vide, utilisez les col-X-pull-Yclasses de Bootstrap . Par exemple, pour pousser quelque chose d'une taille de 50% vers la droite mais laisser une colonne d'espace vers la droite (dans une grille de 12 colonnes par exemple):col-xs-6 pull-right col-xs-pull-1
James Cushing
Il se trouve à gauche car vous divisez manuellement le contenu en différentes lignes. Et si vous les supprimez et que le contenu suivant n'est pas large à 100% (c'est-à-dire suit certaines colonnes de 50% de largeur col-xs-6), il s'empilera bizarrement.
kpull1
Je ne sais pas pourquoi c'est la réponse acceptée avec autant de votes, elle ne répond pas à la question, tout ce qui s'est passé ici est que le col-xs-3 est enveloppé d'une ligne, c'est pourquoi aucun autre contenu n'a atterri cette même ligne / ligne. s'il y avait un autre col-xs-3 alors il serait juste à côté du 1er col-xs-3 sur la même ligne, donc cette réponse ne répond pas à la question. La réponse de kpull1 atteint le résultat demandé.
NZ Dev
82

J'utilise le CSS personnalisé simple suivant que j'ai écrit pour y parvenir.

.col-xs-offset-right-12 {
  margin-right: 100%;
}
.col-xs-offset-right-11 {
  margin-right: 91.66666667%;
}
.col-xs-offset-right-10 {
  margin-right: 83.33333333%;
}
.col-xs-offset-right-9 {
  margin-right: 75%;
}
.col-xs-offset-right-8 {
  margin-right: 66.66666667%;
}
.col-xs-offset-right-7 {
  margin-right: 58.33333333%;
}
.col-xs-offset-right-6 {
  margin-right: 50%;
}
.col-xs-offset-right-5 {
  margin-right: 41.66666667%;
}
.col-xs-offset-right-4 {
  margin-right: 33.33333333%;
}
.col-xs-offset-right-3 {
  margin-right: 25%;
}
.col-xs-offset-right-2 {
  margin-right: 16.66666667%;
}
.col-xs-offset-right-1 {
  margin-right: 8.33333333%;
}
.col-xs-offset-right-0 {
  margin-right: 0;
}
@media (min-width: 768px) {
  .col-sm-offset-right-12 {
    margin-right: 100%;
  }
  .col-sm-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-sm-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-sm-offset-right-9 {
    margin-right: 75%;
  }
  .col-sm-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-sm-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-sm-offset-right-6 {
    margin-right: 50%;
  }
  .col-sm-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-sm-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-sm-offset-right-3 {
    margin-right: 25%;
  }
  .col-sm-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-sm-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-sm-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .col-md-offset-right-12 {
    margin-right: 100%;
  }
  .col-md-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-md-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-md-offset-right-9 {
    margin-right: 75%;
  }
  .col-md-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-md-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-md-offset-right-6 {
    margin-right: 50%;
  }
  .col-md-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-md-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-md-offset-right-3 {
    margin-right: 25%;
  }
  .col-md-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-md-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-md-offset-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .col-lg-offset-right-12 {
    margin-right: 100%;
  }
  .col-lg-offset-right-11 {
    margin-right: 91.66666667%;
  }
  .col-lg-offset-right-10 {
    margin-right: 83.33333333%;
  }
  .col-lg-offset-right-9 {
    margin-right: 75%;
  }
  .col-lg-offset-right-8 {
    margin-right: 66.66666667%;
  }
  .col-lg-offset-right-7 {
    margin-right: 58.33333333%;
  }
  .col-lg-offset-right-6 {
    margin-right: 50%;
  }
  .col-lg-offset-right-5 {
    margin-right: 41.66666667%;
  }
  .col-lg-offset-right-4 {
    margin-right: 33.33333333%;
  }
  .col-lg-offset-right-3 {
    margin-right: 25%;
  }
  .col-lg-offset-right-2 {
    margin-right: 16.66666667%;
  }
  .col-lg-offset-right-1 {
    margin-right: 8.33333333%;
  }
  .col-lg-offset-right-0 {
    margin-right: 0;
  }
}
Rukshan
la source
2
Le codage en dur des pourcentages n'est pas idéal. De plus, il est possible de modifier le fonctionnement du système de grille de Bootstrap, vous n'êtes donc pas assuré d'avoir 12 colonnes. Dans ce cas, cette réponse échoue. Il vaut mieux calculer le pourcentage par rapport au nombre de colonnes de la grille.
Muhammad Abdul-Rahim
6
bootstrap ne fait la même chose qu'à partir de la gauche
Scott
une excellente solution de contournement! cela doit être en bootstrap, je n'ai jamais compris pourquoi ils n'ont pas ajouté
FarukT
17 

<div class="row">
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
<div class="col-md-10 col-md-pull-2">
col-md-10 col-md-pull-2
</div>
</div>
Développer l'extrait

Mohammad Jamal Dashtaki
la source
15

J'ai modifié Bootstrap SASS (v3.3.5) en fonction de la réponse de Rukshan

Ajoutez ceci à la fin du calc-grid-columnmixin mixins/_grid-framework.scss, juste en dessous de la $type == offsetcondition if.

@if ($type == offset-right) {
      .col-#{$class}-offset-right-#{$index} {
          margin-right: percentage(($index / $grid-columns));
      }
  }

Modifiez le make-gridmixin mixins/_grid-framework.scsspour générer les offset-rightclasses.

// Créer une grille pour une classe spécifique
@mixin make-grid ($ class) {
  @include float-grid-columns ($ class);
  @include loop-grid-columns ($ grid-columns, $ class, width);
  @include loop-grid-columns ($ grid-columns, $ class, pull);
  @include loop-grid-columns ($ grid-columns, $ class, push);
  @include loop-grid-columns ($ grid-columns, $ class, offset);
  @include loop-grid-columns ($ grid-columns, $ class, offset-right);
}

Vous pouvez ensuite utiliser les classes comme col-sm-offset-right-2etcol-md-offset-right-1

WeNeigh
la source
+1 pour utiliser percentageau lieu de coder en dur les valeurs; c'est plus proche de la façon dont Bootstrap gère en interne le système de grille, en plus il autorise une colonne de grille variable si la valeur par défaut 12 n'est pas souhaitée.
Muhammad Abdul-Rahim
2

Puisque Google semble aimer cette réponse ...

Si vous cherchez à respecter la convention de dénomination de Bootstrap 4, c'est-à-dire offset - * - #, voici cette modification:

.offset-right-12 {
  margin-right: 100%;
}
.offset-right-11 {
  margin-right: 91.66666667%;
}
.offset-right-10 {
  margin-right: 83.33333333%;
}
.offset-right-9 {
  margin-right: 75%;
}
.offset-right-8 {
  margin-right: 66.66666667%;
}
.offset-right-7 {
  margin-right: 58.33333333%;
}
.offset-right-6 {
  margin-right: 50%;
}
.offset-right-5 {
  margin-right: 41.66666667%;
}
.offset-right-4 {
  margin-right: 33.33333333%;
}
.offset-right-3 {
  margin-right: 25%;
}
.offset-right-2 {
  margin-right: 16.66666667%;
}
.offset-right-1 {
  margin-right: 8.33333333%;
}
.offset-right-0 {
  margin-right: 0;
}
@media (min-width: 576px) {
  .offset-sm-right-12 {
    margin-right: 100%;
  }
  .offset-sm-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-sm-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-sm-right-9 {
    margin-right: 75%;
  }
  .offset-sm-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-sm-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-sm-right-6 {
    margin-right: 50%;
  }
  .offset-sm-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-sm-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-sm-right-3 {
    margin-right: 25%;
  }
  .offset-sm-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-sm-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-sm-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 768px) {
  .offset-md-right-12 {
    margin-right: 100%;
  }
  .offset-md-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-md-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-md-right-9 {
    margin-right: 75%;
  }
  .offset-md-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-md-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-md-right-6 {
    margin-right: 50%;
  }
  .offset-md-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-md-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-md-right-3 {
    margin-right: 25%;
  }
  .offset-md-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-md-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-md-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 992px) {
  .offset-lg-right-12 {
    margin-right: 100%;
  }
  .offset-lg-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-lg-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-lg-right-9 {
    margin-right: 75%;
  }
  .offset-lg-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-lg-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-lg-right-6 {
    margin-right: 50%;
  }
  .offset-lg-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-lg-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-lg-right-3 {
    margin-right: 25%;
  }
  .offset-lg-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-lg-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-lg-right-0 {
    margin-right: 0;
  }
}
@media (min-width: 1200px) {
  .offset-xl-right-12 {
    margin-right: 100%;
  }
  .offset-xl-right-11 {
    margin-right: 91.66666667%;
  }
  .offset-xl-right-10 {
    margin-right: 83.33333333%;
  }
  .offset-xl-right-9 {
    margin-right: 75%;
  }
  .offset-xl-right-8 {
    margin-right: 66.66666667%;
  }
  .offset-xl-right-7 {
    margin-right: 58.33333333%;
  }
  .offset-xl-right-6 {
    margin-right: 50%;
  }
  .offset-xl-right-5 {
    margin-right: 41.66666667%;
  }
  .offset-xl-right-4 {
    margin-right: 33.33333333%;
  }
  .offset-xl-right-3 {
    margin-right: 25%;
  }
  .offset-xl-right-2 {
    margin-right: 16.66666667%;
  }
  .offset-xl-right-1 {
    margin-right: 8.33333333%;
  }
  .offset-xl-right-0 {
    margin-right: 0;
  }
}
Michael Stenberg
la source
1

Basé sur la réponse de WeNeigh ! voici un exemple MOINS

.col-offset-right(@i, @type) when (@i >= 0) {
    .col-@{type}-offset-right-@{i} {
        margin-right: percentage((@i / @grid-columns));
    }
    .col-offset-right(@i - 1, @type);
};
.col-offset-right(@grid-columns, xs);
.col-offset-right(@grid-columns, sm);
.col-offset-right(@grid-columns, md);
.col-offset-right(@grid-columns, lg);
user1809033
la source
1

Vous devez combiner plusieurs classes ( col-*-offset-*pour la marge gauche et col-*-pull-*pour la tirer à droite)

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-xs-3 col-xs-offset-9">
      I'm a right column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
    <div class="col-xs-3 col-xs-offset-9 col-xs-pull-9">
      I'm a left column
    </div>
    <div class="col-xs-3">
      We're
    </div>
    <div class="col-xs-3">
      four columns
    </div>
    <div class="col-xs-3">
      using the
    </div>
    <div class="col-xs-3">
      whole row
    </div>
  </div>
</div>
Développer l'extrait

Vous n'avez donc pas besoin de le séparer manuellement en différentes lignes.

kpull1
la source
0

Voici la même solution que Rukshan mais en sass (afin de conserver votre configuration de grille) pour des cas particuliers qui ne fonctionnent pas avec la solution de Ross Allen (lorsque vous ne pouvez pas avoir de div.row parent)

@mixin make-grid-offset-right($class) {
    @for $index from 0 through $grid-columns {
        .col-#{$class}-offset-right-#{$index} {
            margin-right: percentage(($index / $grid-columns));
        }
    }
}

@include make-grid-offset-right(xs);

@media (min-width: $screen-sm-min) {
  @include make-grid-offset-right(sm);
}

@media (min-width: $screen-md-min) {
  @include make-grid-offset-right(md);
}

@media (min-width: $screen-lg-min) {
  @include make-grid-offset-right(lg);
}
tchiot.ludo
la source
0 

<div class="row col-xs-12">            
            <nav class="col-xs-12 col-xs-offset-7" aria-label="Page navigation">
                <ul class="pagination mt-0">                   
                    <li class="page-item">                        
                        <div class="form-group">
                            <div class="input-group">
                                <input type="text" asp-for="search" class="form-control" placeholder="Search" aria-controls="order-listing" />

                                <div class="input-group-prepend bg-info">
                                    <input type="submit" value="Search" class="input-group-text bg-transparent">                                   
                                </div>
                            </div>
                        </div>
                    </li>
                   
                </ul>
            </nav>
        </div>
Développer l'extrait

Prakash
la source