Bootstrap网格系统不起作用

Question

我在这里有一个使用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>