gpt4 book ai didi

html - bootstrap 3.0 equalHeights 填充问题

转载 作者:太空宇宙 更新时间:2023-11-04 04:16:38 26 4
gpt4 key购买 nike

当我将页面大小调整为移动 View 以便每行一个框时,我的区域之间没有任何填充,所以目前它们都渗入一个 - 无论如何我可以解决这个问题并在它们之间添加一个间隙吗?

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

感谢任何帮助,干杯

最佳答案

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

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

到 Css 的末尾,它起作用了。 fiddle

但是你有使用的理由吗?

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

关于html - bootstrap 3.0 equalHeights 填充问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19833575/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com