Bootstrap 4 - 中心列表

Question

我正在用Bootstrap 4 beta构建一个应用程序。这个应用程序目前非常基础，并有一个内联列表。我试图在屏幕中间水平居中这个列表。如Bootply所示，我认为justify-content-center会这样做。但是，这并不奏效。我尝试了我看到列出的here没有任何运气的其他集中班。我的列表如下所示：

<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> 

如何将内联列表与Bootstrap 4测试版集中在一起？

Answer 1

使用text-centerOR，

mx-auto使用一个Flexbox的容器（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> 

如何定心作品在自举4 ...

text-center用于显示：内嵌元素

mx-auto（自动x轴边距）将围绕显示：块或显示：挠性元件那有一个确定的宽度，（％，vw，px等）。默认情况下在网格列上使用Flexbox，因此也有各种居中方法......

中心文本或内联元素：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> 

中心显示：块或显示：挠曲：mx-auto

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

列也可以与居中：mx-auto，因为row是display:flex

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

Demo Bootstrap 4 Horizontal Centering

Answer 2

你需要使用text-center这个类，它实际上使用引导css中的text-align属性在屏幕中居中。

<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> 

希望这会有所帮助。

Answer 3

使用display:flex用于UL因为justify-content-center作品与Flexbox的

ul { 
 
    display:flex; 
 
}

<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>

Answer 4

如果你想使用自举类，那么你可以使用row

<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>

否则，只需text-align:center就足够了。

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

<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>