ul alignement vertical dans bootstrap4

Selon le document Bootstrap4, nous pouvons utiliser la classe prédéfinie align-items-center et justify-content-center pour aligner le contenu verticalement et horizontalement. Je teste l'exemple de document Bootstrap4 et cela fonctionne comme il se doit, mais en utilisant les classes align-items-center et justify-content-center dans le code suivant, ce n'est pas souhaitable! Je fais ul tag display:flex en utilisant des classes bootstrap mais son contenu (li tags) ne sont pas alignés horizontalement et verticalement. Aussi j'ai vérifié ul propriété dans inspects de Chrome et il a margin-top: 0 et margin-bottom: value. Quel est le problème?ul alignement vertical dans bootstrap4

HTML:

<body> 
     <div id="top-ribbon" class="container-fluid"> 
      <div class="row align-items-center"> 
       <div id="socials" class="col-6 col-md-2 offset-md-2"> 
        <ul class="d-flex align-items-center justify-content-center"> 
         <li class="list-inline-item color-white"><i">1</i></li> 
         <li class="list-inline-item color-white">2<i"></i></li> 
        </ul> 
       </div> 
      </div> 
     </div>

Css:

color-white{ 
    color: white; 
} 
#top-ribbon{ 
    background-color: rgb(168, 8, 133); 
    border: 1px solid; 
    height: 200px; 
} 
.row{ 
    height: 200px; 
} 
#top-ribbon div{ 
    border: 1px solid; 
} 
#socials ul{ 
    border: 1px solid; 
}

JSFiddle

Source

2017-06-28 soheil

Eh bien, tout d'abord, vous avez des problèmes avec votre syntaxe HTML. Deuxièmement, vous devez réaliser qu'il existe un remplissage et une marge par défaut sur les éléments ul dans le bootstrap. Enlevez-les et vous obtenez l'effet désiré.

#socials ul { 
    border: 1px solid; 
    margin: 0; padding: 0; 
}

https://jsfiddle.net/xxofsr68/3/

J'ai fait deux exemples pour vous de regarder.

Source

2017-06-28 19:22:47

Merci, "d'abord, vous avez des problèmes avec votre syntaxe HTML" que voulez-vous dire? – soheil

@soheil Désolé pour la réponse tardive. Vos balises HTML étaient comme ceci: '' il devrait être juste '' –

+0

Oh ,,, Merci :) – soheil

0

Tout d'abord, ajoutez la classe universelle, c'est-à-dire * {margin: 0px; padding: 0px;} Il supprime l'espace supplémentaire.
Pour Aligner verticalement ajouter display: flex; et align-flex: centre;
Dans le programme margin-bottom ajouté, il devrait être margin-bottom: 0px;

* { margin: 0px; padding: 0px; } .color-white { color: white; } #top-ribbon { background-color: rgb(168, 8, 133); border: 1px solid; height: 200px; Width:100%;float:left; } .row { height: 300px; } #top-ribbon div { border: 1px solid; height: 100%; } #socials { display: flex; align-items:center; } #socials ul { margin-bottom: 0px; width: 100%; float:left;text-align:center; } #socials ul li{float:left;}

<div id="top-ribbon" class="container-fluid"> <div class="row align-items-center justify-content-center"> <div id="socials" class="col-6 col-md-2 offset-md-2"> <ul class="d-flex align-items-center justify-content-center"> <li class="list-inline-item color-white">1</li> <li class="list-inline-item color-white">2</li> </ul> </div> </div> </div>

Source

2018-02-08 05:48:04 Anu

+0

Les réponses de code seulement sont déconseillées sur StackOverflow. S'il vous plaît essayez d'élaborer un peu pour savoir pourquoi c'est une bonne réponse – Mittal

ul alignement vertical dans bootstrap4

Répondre

Questions connexes