水平居中引導3進度條嗎？

Question

我無法在兩列中心放置兩個進度條，與其他兩行相同。

目前：

後市展望：

進度條代碼：

<div class="row top-row"> 
        <div class="col-md-6 text-center"> 
         <div class="progress" style="width:120px;"> 
          <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70% 
          </div> 
         </div> 
        </div> 

        <div class="col-md-6 text-center"> 
         <div class="progress" style="width:120px;"> 
          <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">70% 
          </div> 
         </div> 
        </div> 
       </div> 

兩個平方，這似乎工作：

<div class="row top-row"> 
        <div class="col-md-6 text-center"> 
         <div class="charBox">img1</div> 
        </div> 

        <div class="col-md-6 text-center"> 
         <div class="charBox">img2</div> 
        </div> 
       </div> 

上面一排是.top-行{margin-top：20px;}僅用於距離行。

將這些進度條與其他兩行相同的正確方法是什麼？感謝一些幫助，謝謝！

Answer 1

如果我沒有記錯，Bootstrap沒有這個選項。本身，但你可以通過添加你自己的類到元素，然後爲該類添加一些樣式。

你有你col-md-6添加另一個類的column-centered

然後在你的CSS也加入一些樣式...

.column-centered { 
    float: none; 
    margin: 0 auto; 
}