自舉網格系統不工作

Question

我有一個網頁here我在哪裏使用Bootstrap網格系統。它應該每列顯示三個項目，但如果向下滾動到第3/4行，則項目開始未對齊。我注意到，如果只有一個項目比下面的組件稍長，那麼整個網格會變得相當混亂。

這裏是整個電網系統中的一個項目代碼：

<div class="col-sm-12 col-xs-12 col-md-6 col-lg-4"> 
     <h4 align="center"><strong>Name</strong></h4> 
     <div class="row" align="center"> 
     <div class="image-cropper"> 
      <!... personal image...> 
     </div> 
     <div class="center-justified"> 
       <!.. sth sth blah blah..> 
     </div> 
    </div> 
</div> 

有誰有任何想法如何能解決嗎？

編輯：我想實現是在大屏幕上顯示每行每三列，然後當它收縮它應該只中等屏和全行的小屏幕上顯示每行每兩列。現在，如果我圍繞每三列包裝一個容器/行，當我將其調整爲中等屏幕大小（每行只有兩個項目）時，如果類從.col-lg-4切換到.col-md-6，則會出現白色間隙。我想擺脫那個白色的差距。

Answer 1

對於每兩列把它們放到容器這樣那樣會給你的結果尋找：

<div class="container"> 

    <div class="col-md-6"> 

     Your code here... 

    </div> 

    <div class="col-md-6"> 

     Your code here... 

    </div> 

</div> 

然後就爲你做這個寫在你的網站每兩個人。希望這有助於。

Answer 2

請嘗試以下這個代碼

<div class="container"> 
    <!--Row 1--> 
    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Martin Sandve Alnæs</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Martin Sandve Alnæs' style='background: url(/_static/images/mugshots/alnaes.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     <div class="center-justified"> 
      <p>Martin is a postdoctoral fellow at <a 
      href="http://simula.no/">Simula Research Laboratory</a>. 
       </p> 

       <p>He has been involved with the FEniCS Project since 2006, 
       is the main developer of UFL and SFC, and one of the 
       developers of UFC, Instant, SyFi and DOLFIN.</p> 

      <p>You can view all Martin&#8217;s contributions on <a 
       href="https://bitbucket.org/martinal">his Bitbucket 
       page.</a></p> 
     </div> 
     </div> 
    </div> 

    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Jan Blechta</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Jan Blechta' style='background: url(/_static/images/mugshots/blechta.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     </div> 
     <div class="center-justified"> 
      <p> 
      Jan is a PhD. student of 
      <a href="http://mod.karlin.mff.cuni.cz/en/">Mathematical Modelling</a> 
      at the 
      <a href="http://www.mff.cuni.cz/to.en/">Charles University in Prague</a>. 
      </p> 
      <p> 
      He has been involved with the FEniCS project since 2013 and is a 
      developer and maintainer of DOLFIN and Instant. 
      </p> 
      <p>You can view all Jan&#8217;s contributions on <a 
      href="https://bitbucket.org/blechta">his Bitbucket 
      page.</a></p> 
     </div> 
    </div> 

    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Johan Hake</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Johan Hake' style='background: url(/_static/images/mugshots/hake.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     </div> 
     <div class="center-justified"> 
      <p>Johan is a postdoctoral fellow at <a 
      href="http://simula.no/">Simula Research Laboratory</a>. 
       </p> 

       <p>He has been involved with the FEniCS Project since 2007, 
       is a maintainer of the Python interface of DOLFIN, and is 
       a developer of Instant, UFC and FFC.</p> 

      <p>You can view all Johans&#8217;s contributions on <a 
       href="https://bitbucket.org/johanhake">his Bitbucket 
       page.</a></p> 
     </div> 
    </div> 
    <div class="clearfix visible-*-block"></div> 
    <!--End of Row 1--> 

    <!--Row 2 --> 
    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Johan Hoffman</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Johan Hoffman' style='background: url(/_static/images/mugshots/hoffman.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     </div> 
     <div class="center-justified"> 
      <p>Johan is a professor at the <a href="http://www.kth.se/">KTH Royal Institute of Technology</a>. 
      </p> 
      <p>He has been involved with the FEniCS Project since 2003 
      and is a developer of DOLFIN and Unicorn.</p> 
     </div> 
    </div> 

    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Johan Jansson</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Johan Jansson' style='background: url(/_static/images/mugshots/jansson.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     </div> 
     <div class="center-justified"> 
      <p>Johan is a senior researcher at the <a href="http://www.kth.se/">KTH Royal Institute of 
      Technology</a>.</p> 

      <p>He has been involved with the FEniCS Project since 2004 
      and is a developer of DOLFIN and Unicorn.</p> 
     </div> 
    </div> 

    <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4"> 
     <h4 align="center"><strong>Benjamin Kehlet</strong></h4> 
     <div class="row" align="center"> 
      <div class="image-cropper"> 
      <div class="mugshot2" alt='Benjamin Kehlet' style='background: url(/_static/images/mugshots/kehlet.jpg) no-repeat 50% 50%' ></div> 
      </div> 
     </div> 
     <div class="center-justified"> 
      <p>Benjamin is a Ph.D. student at 
       <a href="http://www.simula.no/">Simula Research Laboratory</a> and the 
       <a href="http://www.uio.no/">University of Oslo</a>. 
       </p> 

       <p>He has been involved with the FEniCS Project since 2011 
       and is the primary developer of msrh, the FEniCS meshing component. 
       </p> 

      <p>You can view all Benjamin&#8217;s contributions on <a 
       href="https://bitbucket.org/kehlet">his Bitbucket 
       page.</a></p> 
     </div> 
    </div>