CSS - 使用引導刪除行和列中的所有寬度

Question

我在我的網站上有一個節，它有兩行，每行四列，塊圖像和標題穿過圖像。 我希望能夠規定每個列/圖像之間的邊距 - 基本上它需要很窄。然而，每個列似乎都有標準的排水溝寬度，我似乎無法刪除它們。我試過使用.no-gutter類，但他們似乎沒有工作。如何刪除列/圖像之間的所有間距以便我可以實現自己的？ 下面的代碼，因爲它代表 -

#whatwedo { 
 
    width: 100%; 
 
    max-width: 100%; 
 
    height: auto; 
 
} 
 

 
h1 { 
 
    font-size: 3rem; 
 
    font-weight: normal; 
 
    color: #000; 
 
    text-align: center; 
 
    margin: 0; 
 
    padding-bottom: 0px; 
 
} 
 

 
.container-fluid { 
 
    width: auto; 
 
    margin: 0px auto; 
 
    /* max-width: 80rem; */ 
 
} 
 

 
.row .no-gutter { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
} 
 

 
.col { 
 
    /* width: calc(25% - 2rem); */ 
 
    /* margin: 1rem; */ 
 
    height: 300px; 
 
    width: 300px; 
 
    margin-bottom: 20px; 
 
} 
 

 
#whatwedo .col { 
 
    position: relative; 
 
} 
 

 
#whatwedo h2 { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 30%; 
 
    margin: 0 20px 0 20px; 
 
    color: white; 
 
    text-align: center; 
 
    transform: translate(-50%, -50%) 
 
}

<section id="whatwedo"> 
 
    <div class="container-fluid"> 
 
    <h1>What we do</h1> 
 
    <div class="container"> 
 
     <div class="row no-gutters"> 
 
     <div class="col"> 
 
      <h2>Brand Identity</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Graphic Design</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Editorial Design</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Brand Guidelines</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 

 
     </div> 
 
     <div class="row no-gutters"> 
 
     <div class="col"> 
 
      <h2>Print Management</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Signage</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Creative Direction</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 
     <div class="col"> 
 
      <h2>Illustration & Animation</h2> 
 
      <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
 
     </div> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
</section>

它不一定看得很清楚這裏，但與引導，這是頁面的外觀 -

我認爲寬度差距也會導致列不能全部保持在一個塊中對齊並落到另一行。

Answer 1

我改變你的類爲「COL-SM-3」而不是「關口」

<section id="whatwedo"> 
     <div class="container-fluid"> 
     <h1>What we do</h1> 
     <div class="container"> 
      <div class="row no-gutters"> 
      <div class="col-sm-3"> 
       <h2>Brand Identity</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Graphic Design</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Editorial Design</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Brand Guidelines</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 

      </div> 
      <div class="row no-gutters"> 
      <div class="col-sm-3"> 
       <h2>Print Management</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Signage</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Creative Direction</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 
      <div class="col-sm-3"> 
       <h2>Illustration & Animation</h2> 
       <img src="http://res.cloudinary.com/mrmw1974/image/upload/v1506013647/what_we_do1_tfckgo.jpg" style="width: 300px; height: 300px;"> 
      </div> 

      </div> 
     </div> 
     </div> 

    </section> 

Answer 2

試圖把！重要的在你的代碼

margin-right: 0!important; 
margin-left: 0!important; 

，我知道在引導陰溝裏什麼是db2不是利潤率。如果還沒有嘗試使用這個

padding-right: 0!important; 
padding-left: 0!important;