Question

当我将我的页面调整到移动视图以便每行一个盒子时，我在区域之间没有任何填充，因此目前它们都会流入一个 - 无论如何我可以修复它并在它们之间添加间隙吗？

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

bootstrap 3.0 equalHeights填充问题

1 个答案: