bootstrap 3.0 equalHeights 填充问题

Question

当我将页面大小调整为移动视图以使其每行一个框时，我在区域之间没有任何填充，因此目前它们都汇成一个 - 无论如何我可以解决这个问题并在它们之间添加一个间隙吗？

http://jsfiddle.net/4v3u4/7/

<div class="container">
<div class="row">
  <div id="equalheight">      

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">

            <div class="test">  

                <div class="info-block"><!-- BODY BOX-->
                    <p>one line of copy</p>
                </div>

            </div>              
      </div>  

      <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
          <div class="test">    
              <div class="info-block"><!-- BODY BOX-->                
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>
      </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="test">    
                  <div class="info-block"><!-- BODY BOX-->                
                      <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                      Quisque mauris augue</p>
                  </div>
              </div>
          </div>              

      </div>
  </div><!--/row-->
  <hr>
  <div class="row">
      <div id="equalheight">      

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>lots and lots of copy lots and lots of copy lots and lots of copy lots and lots of copy Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
                  Quisque mauris augue</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>  

          <div class="col-12 col-lg-3 col-md-3 col-sm-3 col-xs-12 demo">
              <div class="info-block"><!-- BODY BOX-->
                  <p>one line of copy</p>
              </div>
          </div>              

      </div>
   </div><!--/row-->
</div>




body {
margin: 0;
font-size: 15px;
color: #005f6b;
background-color: #ddeaf3;
padding-top: 72px;
}

.navbar-brand {
  float: left;
  display: block;
  padding: 0px 20px 0px;
  margin-left: -20px;
  font-size: 24px;
  line-height: 40px;
  color: #53564e;
  text-shadow: 2px 2px 1px #fff;
  text-transform: uppercase;
  font-weight: 400;
}

/* Top Navigations links styles */
#top-navigation > ul.nav > li > a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 18px;
}

.demo{
    //background-color:#000;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

#equalheight {
    overflow: hidden; 
}

.test{
    background-color:#efefef;
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

.info-block{
    padding: 14px;
}

任何帮助表示赞赏，干杯

Answer 1

您必须在引导媒体查询中更改测试类的行为。我加了

@media(max-width:767px){
    .test{
        margin: 15px 0px;
        padding: 0px
    }
}

到 Css 的末尾，它就可以工作了。 fiddle

但是你使用它有什么原因吗？

margin-bottom: -99999px;
padding-bottom: 99999px;