html - 在Bootstrap中抵消列

我正在使用Bootstrap制作网页，并且需要在两行中显示七个徽标。上排带有三个徽标，下排带有四个徽标。看起来像这样：

我现在有点像那样，但只有在全屏显示时才保持这种状态。它不像开始调整大小时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;
}

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

最佳答案

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

演示：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%}