在Bootstrap中偏移列

Question

我正在使用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; 
}

图像应以页面为中心。我的问题是让第二行与第一行对齐，如图所示。谢谢！

Answer 1

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

DEMO：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%}