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>

这里看起来不一定非常清楚，但是使用bootstrap这就是页面的外观 -

我认为宽度间隙也导致列无法在一个块中保持对齐并向下移动到另一行。

Answer 1

我将你的课程改为“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>

Answer 2

尝试在代码中添加！important

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

以及我在bootstrap上所知道的装订线是填充物而不是边缘。如果还是不试试这个

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

CSS - 使用引导程序从行和列中删除所有宽度

2 个答案: