html - Bootstrap 中的偏移列

Question

我正在使用 Bootstrap 制作一个网页，我有七个 Logo 需要显示在两行中。顶行带有三个 Logo ，底行带有四个 Logo 。看起来像这样:

我现在有点像那样，但只有当屏幕全宽时它才会保持那样。当您开始调整它的大小时，它不像 Bootstrap 通常那样正确堆叠。这是我的 HTML:

    <div class="row partners">
      <!--Title-->
      <div class="col-md-12">
        <h5 id="vp">
      VALUED PARTNERS
    </h5>
    <div class="underline"></div>
  </div>  
  <div class="col-md-3 col-md-offset-1 ">
    <img class="img-responsive " alt="CEN logo" src="img/CEN_logo.png">
  </div>
 <div class="col-md-3 col-md-offset-1">
    <img class="img-responsive" alt="Kinber logo" src="img/Kinber_logo.png">
  </div>
   <div class="col-md-3 col-md-offset-1 ">
    <img class="img-responsive" alt="NYSERNET logo" src="img/NYS_logo.png">
  </div>


    <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/WISNET_logo.png" alt="WISCNET logo">      
    </div>
    <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/NJEdge_logo.png" alt="NJedge logo">      
    </div>
     <div class="col-md-3 littlebit">
        <img class="img-responsive" src="img/MCNC_logo.png" alt="MCNC logo">      
    </div>
     <div class="col-md-3 littlebitless">
        <img class="img-responsive" src="img/GPN_logo.png" alt="Great Plains Network logo">      
    </div>

  </div> <!--Partners-->

这是我必须使用的 CSS:

.littlebit{
    padding-right: 2%; 
    padding-left: 4%; 
    padding-bottom: 2%; 
    padding-top: 2%; 
}
.littlebitless{ 
    padding-left: 5%; 
    padding-bottom: 2%; 
    padding-top: 2%; 
}
.partners{
    margin-top: 3%;  
    border-style: solid; 
    border-width: 3px; 
    border-color: #7C7C7C; 
    padding-bottom: 7px; 
    padding-top: 5px; 
}

图像应该在页面上居中。我的问题是让第二行与第一行对齐，如图所示。谢谢!

Answer 1

为什么不做一些更简单的事情:

演示:https://jsbin.com/resaxa

https://jsbin.com/resaxa/1/edit?html,css,output

HTML:

 <div class="container">
   
   <ul class="logo-list list-inline text-center">
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li class="visible-md visible-lg clearfix"><!--clear after three on md and large --></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
    <li><img src="http://placekitten.com/g/200/70" alt="" class="img-responsive"/></li>
  </ul>
   
</div>

CSS:

.logo-list img {width:100%;height:auto;}
.logo-list li {padding-bottom:1%}