ブートストラップのカラム内の中央div

Question

私はページ内の中央に2つの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

いくつかの変更で、このHTMLを試してみてください：

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