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>