Je crée actuellement une page Web avec bootstrap et j'utilise des colonnes. Ma page ressemble à celle:
p>
J'aimerais centrer la dernière colonne (dans la deuxième ligne) mais la page est dynamique et je ne le fais pas Sachez combien de conteneurs il y a. p>
J'ai trouvé ces deux solutions sur Google: P>
1) Ajoutez ceci à mon CSS: P>
col-lg-offset-4
3 Réponses :
Vous devez ajouter le dernier bloc de texte dans une ligne différente et modifier le "Col-MD-4" en "Col-MD-12".
Les colonnes de bootstrap flottent par défaut avec CSS Voici le truc. P> p> Float code> Propriété. Avec float code> Nous ne pouvons pas aligner les colonnes d'alignement moyennes. Cependant, avec Affichage: Inline-Block Code> Nous pouvons. Tout ce dont nous avons besoin est de supprimer float code> des styles de colonnes et de les modifier en en ligne-block code> avec vertical-align: moyen code> et vous obtiendrez ce que vous voulez. Mais n'oubliez pas de supprimer un espace supplémentaire fourni avec en ligne-block code>.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
<div class="container center-align">
<div class="row">
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="col-xs-4">
<div class="box">
<p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
Pourquoi ne pas simplement utiliser le .col-md-décalsets - * Bootstrap classe, qui fournira la même sortie sans le style supplémentaire inutile? Jetez un coup d'œil à ma réponse.
@ trashr0x Parce qu'il ne sait pas combien de colonnes seront à la dernière rangée car elles sont générées de manière dynamique. Nous pouvons utiliser col-md-décalset - * classe lorsque nous sommes sûrs qu'il y aura une ou deux colonnes de la dernière ligne.
Oups, a raté cette partie de l'exigence!
Je n'étais pas le bownvoter, mais cette solution se concentre la mise en page, mais les cols ne sont plus réactifs
@Skelly ils répondent pleinement comme ils étaient auparavant. Comment vous sentez-vous qu'ils ne sont pas réactifs? Peut-être que je manque quelque chose ou n'a pas remarqué. Veuillez notifier le problème. Je le réparerai.
Je n'étais pas le descendant. Je suppose que vous pouvez améliorer votre démo: 1) Utilisez la classe COL-SM-4 au lieu de COL-XS-4 pour démontrer la responsabilité. 2) Ajoutez une deuxième ligne avec cinq colonnes pour démontrer le comportement dans ce cas également.
Bootstrap a une fonctionnalité intégrée pour atteindre la disposition que vous êtes après, sans l'introduction de règles de CSS supplémentaires. Utilisez simplement le .col-md-décalsets - * code> classe:
Déplacer des colonnes à droite avec
.col-md-décalsets - * code> classes. Ces classes augmentent la marge gauche d'une colonne par * colonnes. Par exemple,.col-md-décalse-4 code> déplace.col-md-4 code> sur quatre colonnes. P> blockQuote>Votre mise en page finirait par regarder similaire à celle-ci: p>
p>
@{ bool lastItemShouldBeCentered = Foo.Count % 3 == 1; for (int i = 0; i < Foo.Count; i++) { bool isLastItem = i == Foo.Count - 1; if (isLastItem && lastItemShouldBeCentered) { <div class="col-md-4 col-md-offset-4"> // Foo[i] content here </div> } else { <div class="col-md-4"> // Foo[i] content here </div> } } }
S'il vous plaît fournir un jsfiddle
La solution de décalage semble fonctionner .. codeply.com/go/pbfcft4vet
@Skelly Oui, cela fonctionne si je sais qu'il existe exactement quatre conteneurs, car je peux définir le décalage manuellement sur le quatrième conteneur. Pour moi, cela ne fonctionne pas car mon site est généré de manière dynamique et je ne sais pas combien de conteneurs il y aura.
Postez le HTML. Que se passera-t-il s'il y a 2 cases dans la dernière ligne?