html - CSS - 使用 Bootstrap 从行和列中删除所有宽度

Question

我的网站上有一个部分，它有两行四列，带有 block 图像和图像标题。我希望能够指定每列/图像之间的边距宽度 - 基本上它需要非常窄。但是，每列似乎都有标准的装订线宽度，我似乎无法删除它们。我试过使用 .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>

这里看起来不一定很清楚，但是使用 bootstrap 这就是页面的样子 -

我认为宽度差距也导致列无法在一个 block 中保持对齐并下降到另一行。

Answer 1

我把你的类(class)改为“col-sm-3”而不是“col”

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