我的图像没有连续显示

Question

在我的代码的一部分中，我为显示图像的部分制作了一个行网格，但是当我去插入并查看网站时，它不是以行格式显示而是以列格式显示，我不确定为什么.我认为问题出在它是 col-sm-6 但我将它更改为 col-sm-12 但它仍然没有显示它。有什么原因吗？

.site-main .project-area {
  padding: 4rem 0;
}

.site-main .project-area .button-group button {
  background: transparent;
  border: none;
  font: normal 500 16px/130px var(--lato);
  text-transform: uppercase;
}

.site-main .project-area .button-group button+button {
  padding-left: 3rem;
}

.site-main .project-area .grid .our-project>title h4 {
  font: normal 700 25px/12px var(--lato);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<section class="project-area">
  <div class="container">
    <div class="project title pb-5">
      <h1 class="h1 text-uppercase title-h1"> Recent Projects</h1>
      <h1 class="h1 text-uppercase title h1"> Quality Work</h1>
    </div>
    <div class="div button-group">
      <button type="button" class="active">All</button>
      <button type="button" data-filter=".cars">Cars</button>
      <button type="button" data-filter=".character">Characters</button>
      <button type="button">Food</button>
      <button type="button">Activities</button>
    </div>

    <div class="row-grid">
      <div class="col-lg-4 col-md-6 col-sm-6 element-item cars">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/car.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item character">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/images.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">video game character</h4>
            <span class="text-secondary">popular, Portfolio</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 col-sm-12 element-item popular">
        <div class="our-project">
          <div class="img">
            <img src="./img/portfolio/ntfs-to-be-professional-gamer-image1.jpg" alt="car">
          </div>
          <div class="title py-4">
            <h4 class="text-uppercase">minimul design</h4>
            <span class="text-secondary">Latest, Popular</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

将 class row-grid 更改为 row 使其工作。我不认为 Bootstrap 有一个叫做 row-grid 的 class。

如果您试图将所有 div 元素放入一行，只需将 col-lg-4 col-md-6 col-sm-6 和 col-lg-4 col-md-6 col-sm-12 替换为 col

我的图像没有连续显示

My images are not being displayed in a row

html

css

bootstrap-4