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