Bootstrap中的中心圖標4

Question

我有一個應用程序，我正在用Bootstrap 4創建。我需要將一些圖標置於圖像下方。我有一個Bootply here。我的代碼如下所示：

<div class="container"> 
    <br> 
    <div class="row"> 
    <div class="col-lg-6"> 
     <div class="row"> 
     <div class="col-md-3"> 
      <img alt="Picture" src="http://cdn.bgr.com/2015/11/bill-gates.jpg" class="img-circle center-block" style="max-height:6.0rem;"> 
      <br> 
      <ul class="list-inline"> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-twitter"></i></a></li> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-google-plus"></i></a></li> 
      <li class="list-inline-item"><a href="#" style="font-size:1.2rem;"><i class="fa fa-linkedin"></i></a></li> 
      </ul> 
     </div> 

     <div class="col-md-9"> 
      <div><strong>Bill Gates</strong></div> 
      <p> 
      Here is some information about Bill Gates. 
      </p> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

我的問題是，我該如何水平居中的三個圖標我的圖像下面，這樣它看起來像一個居中工具欄？

Answer 1

在您的UL標籤上，刪除內聯列表類，它實施一個浮動。