Bootstrap网格系统不起作用

Question

I have a web page here where I use Bootstrap grid system. It should display three items per column but if you scroll down to like row 3/4 the items start to be misaligned. I noticed that if only one item is slightly longer than the component below, the whole grid becomes quite a mess afterwards.

Here is code for one item in the whole grid system:

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

Does anyone has any idea how this can be fixed?

EDIT : What I am trying to achieve is to display every three columns per row on the large screen and then when it shrinks it should only display every two columns per row on medium screen and full row for small screen.

At the moment, if I wrap a container/row around every three columns, when I resize it to medium screen size (having only two items per row) there will be a white gap when the class switches from .col-lg-4 to .col-md-6 . And I want to get rid of that white gap.

Answer 1

For every two column put them in containers like such this will give the result your looking for :

<div class="container">

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

        Your code here...

    </div>

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

        Your code here...

    </div>

</div>

Then just do this for every two people you write about on your website. Hope this helped.

Answer 2

please try this below code

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