Bootstrap 4 - Liste Des Centres De

Je suis la création d'une application avec le Bootstrap de 4 beta. Cette application est vraiment de base pour le moment et a un single inline liste. Je suis en train de centre de cette liste à l'horizontale au milieu de l'écran. Comme le montre cette Bootply, j'ai pensé justify-content-center le ferait. Toutefois, cela ne fonctionne pas. J'ai essayé les autres centrage des classes, j'ai vu répertoriés ici sans un peu de chance. Ma liste ressemble à ceci:

<div>
  <ul class="list-inline justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

Comment puis-je centre une ligne de la liste avec le Bootstrap de 4 beta?

justify-content-center est pour display:flex éléments

InformationsquelleAutor user687554 | 2017-08-16

Utilisation text-center OU,

Utilisation mx-auto à l'intérieur d'un flexbox conteneur (d-flex)..

https://www.bootply.com/6COUMfNrEU

<div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

Comment centrage travaille dans le Bootstrap 4...

text-center est utilisé pour le display:inline éléments

mx-auto (auto x-axe marges) centre de display:block ou display:flex éléments qui ont une largeur définie, (%, vw, px, etc..). Flexbox est utilisé par défaut sur les colonnes de la grille, il existe différentes méthodes de centrage...

Centre de texte ou des éléments inline: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

Centre display:block ou display:flex: mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

Colonnes peuvent également être centré avec: mx-auto, parce que row est display:flex

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

Démo De Bootstrap 4 Centrage Horizontal

InformationsquelleAutor Zim

Si vous souhaitez utiliser bootstrap classes, alors vous pouvez utiliser row

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <ul class="list-inline d-flex justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

Sinon, il suffit de text-align:center est assez.

CSS:

ul.list-inline {
  text-align: center
}

HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <ul class="list-inline">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>
  </ul>
</div>

Soyez prudent avec .row. Il est destiné à être utilisé uniquement pour contenir les colonnes (col-*) en raison des marges négatives.
Je vous remercie de me le rappeler. Mais je pense que l'emballage de la .row dans le .container est assez.
.row ne doit être utilisé pour groupe de colonnes. Votre solution ne fonctionne que parce que la ligne est l'ajout de display:flex, de sorte qu'il serait mieux d'utiliser la d-flex classe à la place.
Édité. merci.
Utilisation mx-auto à l'intérieur d'un flexbox conteneur (d-flex)

InformationsquelleAutor Sankar

Vous devez utiliser la classe text-center qui, de fait, les centres de la bloquer à l'écran à l'aide de la text-align de la propriété au sein de bootstrap css.

<div>
   <ul class="list-inline text-center">
      <li class="list-inline-item">Item 1</li>
      <li class="list-inline-item">Item 2</li>
      <li class="list-inline-item">Item 3</li>
      <li class="list-inline-item">Item 4</li>
      <li class="list-inline-item">Item 5</li>    
   </ul>
</div>

Espère que cette aide.

InformationsquelleAutor Nasir T

Utilisation display:flex pour ul parce que justify-content-center fonctionne avec flexbox

CSS:

ul {
  display:flex;
}

HTML:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<div>
  <ul class="list-inline justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

InformationsquelleAutor Mukesh Ram

Vous devez vous connecter pour publier un commentaire.