[英]Removing white space bootstrap
我正在尝试移除瓷砖之间的空白,如下图所示:
这是我目前拥有的:
这是第二张图片的标记,这是我目前所拥有的:
的CSS
.mainbody-section {
padding-top: 30px;
padding-bottom: 30px;
}
/* Overlay text */
.module {
background-color: lightgray;
background-attachment: fixed;
/*width: 400px;*/
height: 300px;
position: relative;
overflow: hidden;
margin: 20px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background: inherit;
background-attachment: fixed;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
}
.module > header > h1 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
.module > header > h2 {
margin: 0;
color: white;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
的HTML
<div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;">
<div class="row">
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right">
<div class="module">
<header>
<h1 style="font-size: 20px; text-align: center;">Test
</h1>
<h2 style="font-size: 13px; text-align: center;"> This is some sub-text
</h2>
</header>
</div>
</div>
</div>
有人可以建议我移除瓷砖之间所有空白的方法吗?
谢谢
.mainbody-section { padding-top: 30px; padding-bottom: 30px; } .newClass{ background-color: lightgray; padding: 0px!important; margin:0px!important; } .red{ background-color: red!important; } /* Overlay text */ .module { background-color: #abc; background-attachment: fixed; /*width: 400px;*/ height: 300px; position: relative; overflow: hidden; } .module > header { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px 10px; background: inherit; background-attachment: fixed; overflow: hidden; } .module > header::before { content: ""; position: absolute; top: -20px; left: 0; width: 200%; height: 200%; background: inherit; background-attachment: fixed; -webkit-filter: blur(4px); filter: blur(4px); } .module > header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.25); } .module > header > h1 { margin: 0; color: white; position: relative; z-index: 1; } .module > header > h2 { margin: 0; color: white; position: relative; z-index: 1; } * { box-sizing: border-box; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <div class="mainbody-section text-center" style="padding-left: 50px; padding-right: 50px;"> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> <div class="module"> <header> <h1 style="font-size: 20px; text-align: center;">Test </h1> <h2 style="font-size: 13px; text-align: center;"> This is some sub-text </h2> </header> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> <div class="module red"> <header> <h1 style="font-size: 20px; text-align: center;">Test </h1> <h2 style="font-size: 13px; text-align: center;"> This is some sub-text </h2> </header> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 hvr-wobble-to-bottom-right newClass"> <div class="module"> <header> <h1 style="font-size: 20px; text-align: center;">Test </h1> <h2 style="font-size: 13px; text-align: center;"> This is some sub-text </h2> </header> </div> </div> </div>
这是小提琴: http : //jsfiddle.net/q5yfcs2p/
我删除了.module
边距,并为col-*-*
添加了自定义类,因为引导程序的两边都有填充物。 该.no-padding
类删除左右。
.no-padding {
padding-left: 0;
padding-right: 0;
}
col
div上有padding
,而module
div中有margins
。 参见演示: http : //jsfiddle.net/swm53ran/347/
.myClass {
padding: 0px;
}
.myClass .module {
margin: 0px;
outline: 1px solid black;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.