Bootstrap中的一列中的中心div

Question

因此，我試圖將兩個div放在頁面中心的列中，以便在它們之間幾乎沒有空間。最上面的一排很好，但最下面一排是我的問題。我想保留與第一排相同尺寸的徽標並將它們放在一起。我已經展示了下面的內容。附代碼。任何投入將不勝感激。謝謝！

<div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.msh.on.ca/" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png"> 
         </a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="http://www.southlakeregional.org/" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a> 
        </div> 
        <div class="col-md-3 text-center"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
       </div> 

       <div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
        <div class="col-md-3 center-block"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
        <div class="col-md-3 center-block"> 
         <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
          <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
        </div> 
       </div> 

Answer 1

試試這個網站有一些修改：

<div class="col-md-12 vertical-center" style="margin-bottom: 40px;"> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.msh.on.ca/" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-1.png"> 
    </a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.tegh.on.ca/bins/index.asp" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-2.png"></a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="http://www.southlakeregional.org/" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-3.png"></a> 
    </div> 
    <div class="col-md-3 text-center"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;"> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

修改HTML：

<div class="col-md-offset-3 col-md-6 vertical-center text-center" style="margin-bottom: 40px;"> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
    <div class="col-md-6 center-block"> 
    <a href="https://www.niagarahealth.on.ca/site/home" target="_blank"> 
     <img alt="hosp-logo" class="img-responsive center-block hosp-logo" data-animate-effect="fadeIn" src="images/hosp-4.png"></a> 
    </div> 
</div> 

演示：http://jsfiddle.net/lotusgodkk/GCu2D/2191/