问题
I am trying to remove the white space that is between my tiles like the picture below:
This is what I currently have :
Here is the mark up for the second picture which is currently what I have in place :
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>
Can someone please advice me on a way to remove all the white space between the tiles?
Thanks
回答1:
.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/qbo8pk8j/3/
回答2:
Here is fiddle: http://jsfiddle.net/q5yfcs2p/
I removed margin in .module
and add custom class for col-*-*
because bootstrap has paddings on his sides. This .no-padding
class removes left and right.
.no-padding {
padding-left: 0;
padding-right: 0;
}
回答3:
there is padding
on your col
divs and there is margins
in your module
divs. see demo:
http://jsfiddle.net/swm53ran/347/
.myClass {
padding: 0px;
}
.myClass .module {
margin: 0px;
outline: 1px solid black;
}
来源:https://stackoverflow.com/questions/32979392/removing-white-space-bootstrap