无法获得引导列以我想要的方式工作

Question

所以我正在尝试页面上的一个部分，这样当屏幕处于lg和md模式时，每行有2组图像和文字。

所以它应该是这样的......
（img）（词......）（img）（词......）
（img）（单词......）（img）（单词......）

<div class="container rowSpacing">
            <h1 class="text-center">We Capture All Memories...</h1>
            <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your loved ones...</h2>
                </div>

                <div class="clearfix"></div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your special day...</h2>
                </div>

                <div class="clearfix"></div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your last moments...</h2>
                </div>

                <div class="clearfix"></div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your beautiful moments...</h2>
                </div>
            </div>
        </div>

Answer 1

尝试删除

<div class="clearfix"></div>

并将每个列设置为设定的高度

Answer 2

<div class="container rowSpacing">
            <h1 class="text-center">We Capture All Memories...</h1>



            <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your loved ones...</h2>
                </div>



                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your special day...</h2>
                </div>

  </div>
  <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your last moments...</h2>
                </div>



                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <img src="images/NewLogo.png" class="img-responsive" alt="...">
                </div>

                <div class="col-lg-3 col-md-3 col-sm-6 col-xs-6">
                    <h2>Your beautiful moments...</h2>
                </div>

  </div>

            </div>

sample code

Answer 3

你只需要在第二对和第六对图像+文本之后删除clearfix DIV：

http://codepen.io/anon/pen/aJLYeZ