0

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

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

任何帮助表示赞赏，干杯

4

1 回答 1

2

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

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

到 Css 的末尾，它可以工作。小提琴

但是你有使用的理由吗？

margin-bottom: -99999px;
padding-bottom: 99999px;
于 2013-11-07T10:52:22.307 回答