我有一个网页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>
有没有人知道如何解决这个问题？
编辑：我想要实现的是在大屏幕上每行显示每三列，然后当它缩小时，它应该只在中等屏幕和整行上显示每行每两列适合小屏幕。
目前，如果我每隔三列包装一个容器/行，当我将其调整为中等屏幕尺寸（每行只有两个项目）时，当类从{{1}切换时会出现白色间隙到.col-lg-4。我想摆脱那个白色的差距。
答案 0 :(得分：0)
对于每两个列，将它们放在像这样的容器中，这样可以得到你想要的结果：
<div class="container">
<div class="col-md-6">
Your code here...
</div>
<div class="col-md-6">
Your code here...
</div>
</div>
然后就在你网站上写的每两个人这样做。希望这有帮助。
答案 1 :(得分：0)
请尝试以下代码
<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’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’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’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’s contributions on <a
href="https://bitbucket.org/kehlet">his Bitbucket
page.</a></p>
</div>
</div>