刪除空白引導

Question

我想除去白色空間是我的瓦片像下面的圖片之間：

這是我目前有：

這裏是第二張照片的標記，這是目前我所擁有的：

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> 

可有人請諮詢我在地清除瓷磚之間所有的白色空間？

感謝

Answer 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/

Answer 2

這裏是提琴：http://jsfiddle.net/q5yfcs2p/

我.module去除餘量，並添加自定義類col-*-*因爲引導對他的兩側墊襯。這個.no-padding類刪除左側和右側。

.no-padding { 
    padding-left: 0; 
    padding-right: 0; 
} 

Answer 3

有padding您col的div並沒有在你的module的div margins。看到演示： http://jsfiddle.net/swm53ran/347/

.myClass { 
    padding: 0px; 
} 
.myClass .module { 
    margin: 0px; 
    outline: 1px solid black; 
}