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;