html - 类 no-gutter/相应的 CSS 不消除列之间的间隙

Question

我使用 Bootstrap 4 在单行的两列中添加了一些图像。第一列和第二列之间存在间隙，导致我的图像之间出现不需要的不均匀间距(如下所示)。我希望第二张和第三张图片之间的间距与第一张和第二张(以及第三张和第四张)之间的间距相同。

我尝试按照 Bootstrap 4 上的说明进行操作 documentation对于 no-gutters 类，将它添加到行 div 以及以下 CSS，它没有做任何事情(也许我应该改变一些东西？):

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

我也试过(如 suggested elsewhere )这个，它也什么也没做:

.row.no-gutters {
   margin-right: 0;
   margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
   padding-right: 0;
   padding-left: 0;
}

此外，这是相关的 HTML:

  <div class="card">
    <div class="card-header">
      <h3 class="text-center">Works</h3>
    </div>
    <div class="card-body">
      <!-- Class no-gutters removes gutters (gaps) between column content -->
      <div class="row text-center no-gutters">
        <!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
        <div class="col">
        <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

        <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
        </div>

        <div class="col">
        <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

        <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
        </div>

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

查看CodePen完整代码。

Answer 1

no-gutters 是必要的，但现在的问题是对齐。您正在使用 text-center 使图像在每个列中居中。一种解决方案是将所有图像放在同一个 col

中

 <div class="row text-center no-gutters">
  <div class="col">
    <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

    <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">

    <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

    <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
    </div>
 </div>

或者更改每个列的文本对齐方式，但您需要在小型设备上重新调整它:

<div class="row  no-gutters">
      <div class="col text-right">
        <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

        <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
   </div>
   <div class="col text-left">

        <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

        <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
        </div>
   </div>

第一个解决方案的完整代码:

body {
  margin-top: 2em;
  font-family: "Raleway", sans-serif;
}

h1 {
  text-transform: uppercase;
}

.jumbotron {
  text-align: center;
}

img {
  margin: 1em;
  width: 90%;
}

img.works {
  height: 300px;
  width: auto;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

blockquote {
  text-align: left;
  /* text-align: center (applied to .jumbotron) requires an element to be inline or contain text as direct child descendant to be functional. Since blockquote's text is inside block-level elements <p> and <footer>, setting it to display: inline-block is a workaround. Note also block is needed for top/bottom margins to appear */
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  margin: 4em 0;
  padding: 0.35em 2.5em;
  line-height: 1.45;
  position: relative;
  color: #383838;
}

blockquote p {
  font-size: 1em !important;
}

blockquote:before {
  display: block;
  padding-left: 10px;
  content: "\201C";
  font-size: 3em;
  /* Element with abolute positioning is positioned relative to nearest positioned ancestor */
  position: absolute;
  /* Offsets from edges of element's containing block, ancestor to which element is relatively positioned */
  left: -3px; /* Negative moves it left */
  top: -13px; /* Negative moves it toward top */
  color: #7a7a7a;
}

blockquote cite {
  color: #999;
  font-size: 14px;
  margin-top: 5px;
}

ul {
  /* text-align: center, applied to parent jumbotron class, only works on inline elements; applying this ensures ul is centered */
  display: inline-block;
  text-align: left;
  /* Bottom set to 4em to match margin above ul created by blockquote */
  margin-bottom: 4em;
  list-style: none;
}

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>David Hume</title>
  <!-- Ensures proper rendering and touch zooming -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- Provides a responsive, fixed-width container. Needed as outermost wrapper in order for Bootstrap grid system to work correctly -->
  <div class="container">
    <!-- Big grey box for calling extra attention to content -->
    <div class="jumbotron">

      <div class="row">
        <!-- Using a single col in a row, Bootstrap automatically creates a single column (works for all devices) -->
        <div class="col">

          <h1>David Hume</h1>
          <h6>Philosopher, Historian, Economist, and Essayist</h6>

          <div class="card">
            <div class="card-body">
              <img src="https://cdn.theatlantic.com/assets/media/img/2015/09/03/BOB_Essay_Opener_WEBCrop/1920.jpg?1441298243" alt="Portrait of David Hume">
              <div class="caption text-secondary">"Portrait of David Hume," 1754, by Allan Ramsay</div>
            </div>
          </div>

          <blockquote>
          <p>A wise man proportions his belief to the evidence.</p>
          <footer class="blockquote-footer"><cite>David Hume</cite></footer>
          </blockquote>

          <h6>A brief timeline in events of David Hume's life:</h6>
          <br>
          <ul>
            <li><strong>1711</strong> – Born as David Home in Edinburgh, Scotland</li>
            <li><strong>1713</strong> – Father dies</li>
            <li><strong>1723</strong> – Enrolls at University of Edinburgh at the age of 12 (14 was typical)</li>
            <li><strong>1734</strong> – Changes surname to Hume</li>
            <li><strong>1739</strong> – Publishes Books 1 and 2 of <em>A Treatise on Human Nature</em></li>
            <li><strong>1748</strong> – Publishes <em>An Enquiry Concerning Human Understanding</em></li>
            <li><strong>1751</strong> – Publishes <em>An Enquiry Concerning the Principles of Morals</em></li>
            <li><strong>1776</strong> – Dies at the age of 65</li>
          </ul>

        </div>
      </div> <!-- End of row div -->

      <div class="card">
        <div class="card-header">
          <h3 class="text-center">Works</h3>
        </div>
        <div class="card-body">
          <!-- Class no-gutters removes gutters (gaps) between column content -->
          <div class="row text-center no-gutters">
            <!-- Using two col classes; Bootstrap automatically creates two equal-width columns for all devices -->
            <div class="col">
            <img src="https://image.ibb.co/mYFYe7/hum3.jpg" alt="The Natural History of Religion" class="works">

            <img src="https://image.ibb.co/iRtr1n/hum0.jpg" alt="A Treatise of Human Nature" class="works">
      
            <img src="https://image.ibb.co/dZ5Ye7/hum2.jpg" alt="An Enquiry Concerning Human Understanding" class="works">

            <img src="https://image.ibb.co/kdbjmn/hum4.jpg" alt="An Enquiry Concerning the Principles of Morals" class="works">
            </div>

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

      <div class="row">
        <div class="col">

          <blockquote>
          <p>Be a philosopher; but, amidst all your philosophy, be still a man.</p>
          <footer class="blockquote-footer"><cite>David Hume</cite></footer>
          </blockquote>

          <h6>Learn more on <a href="https://en.wikipedia.org/wiki/David_Hume" target="_blank">Wikipedia</a>.</h6>
        </div>
      </div>

    </div> <!-- End of jumbotron div -->

  </div> <!-- End of container div -->

    <footer class="text-center">
    <hr>
    <p>Written and coded by <a href="https://www.linkedin.com/in/natalie-cardot/" target="_blank">Natalie Cardot</a></p>
    </footer>

</body>
</html>