<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto col-md-3">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-3">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-3">
<img src="http://placekitten.com/g/200/300" >
</div>
</div>
</div>
Vous pouvez voir le résultat dans ce codeply
Lorsque l'écran est petit, les colonnes sont toutes centrées dans l'espace. Cependant, lorsque la taille de l'écran est plus grande, je veux plus d'espace entre les colonnes. J'utilise donc les classes utilitaires Bootstrap en définissant les colonnes sur col-md-2.
Le problème est que je veux que le texte soit aligné à gauche dans la liste (ce qu'il est) et la liste elle-même centrée dans chaque colonne afin que le contenu de la ligne entière soit centré sur la page.
Actuellement, chaque liste est alignée à gauche dans chaque colonne.
Contrairement au commentaire selon lequel cette question a déjà été posée, elle ne l'a pas été dans ce contexte particulier. Je pose des questions sur le centrage de la liste verticale, pas sur une liste alignée horizontalement.
Je ne demande pas comment aligner horizontalement les listes uniquement mais comment centrer le contenu ET et centrer le contenu dans les listes tout en gardant le texte aligné à gauche dans chaque liste.
3 Réponses :
essayez d'utiliser la classe d-flex bootstrap (4.3.1) pour définir vos exigences: https://getbootstrap.com/docs/4.0/utilities/flex/ < pre> XXX
si ce n'est pas votre exigence, faites le moi savoir !!
Cela alignera le contenu sur la gauche. Je veux que le contenu des colonnes soit centré dans chaque colonne tout en gardant le texte aligné à gauche de chaque liste non ordonnée.
a ajouté
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto col-md-4">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-4">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-4">
<img src="http://placekitten.com/g/200/300" >
</div>
</div>
</div>. Est-ce comme ça que vous le voulez ??. vérifier le lien ci-dessous https://codepen.io/Xenio/pen/yrYVMM
ul{
margin-left: 50%;
transform: translateX(-50%);
}
ul{
margin-left: 50%;
transform: translateX(-50%);
}
Je veux que le contenu soit centré sur la page mais avec le texte aligné à gauche dans chaque colonne
le texte est aligné à gauche uniquement. pouvez-vous me montrer une capture d'écran
vient d'ajouter une capture d'écran. Vous pouvez voir que le contenu est incliné vers la gauche car le texte est aligné à gauche, tout comme les listes non ordonnées dans chaque colonne. J'ai besoin de l'UL centrée dans chaque col.
Oui c'est ce que je voulais merci. Je suis curieux cependant, il n'y a pas de build dans la classe utilitaire dans Bootstrap pour centrer le contenu dans une colonne?
essayez le centre de texte
text-center centre le texte mais je veux que le texte soit aligné à gauche à l'intérieur d'un ul. Le ul dont j'ai besoin doit être centré à l'intérieur de la colonne.
J'ai trouvé un moyen de le faire en utilisant les classes d'utilitaires Bootstrap 4 flex comme suit:
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-auto col-md-3 d-flex justify-content-center">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-3 d-flex justify-content-center">
<ul class="list-unstyled">
<li>First List Item</li>
<li>Second list item</li>
</ul>
</div>
<div class="col-auto col-md-3 d-flex justify-content-center">
<img src="http://placekitten.com/g/200/300" >
</div>
</div>
</div>
Voici le codeply