自举网格系统不工作

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>