jquery - 使 Bootstrap 4 张卡片每行相等

Question

我正在使用 Bootstrap 4 制作博客模板。在“帖子页面”上，帖子显示为卡片网格。

如果可能的话，我想让这些卡片在所有屏幕宽度下每行都相等，即使在调整窗口大小时也是如此。

这是我到目前为止的代码:

.posts-grid {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.posts-grid > [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}
.posts-grid .post {
  background: #fff;
  border-top: 1px solid #d5d5d5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.posts-grid .text {
  padding: 8px;
}
.posts-grid .card-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.posts-grid .read-more {
  padding: 0 8px 8px 8px;
}
.posts-grid .text-muted {
  margin-bottom: 8px;
}
.posts-grid .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.posts-grid p {
  text-align: justify;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="posts-grid">
    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>

我正在为这个问题寻找一个纯CSS解决方案，如果可能(如果不，jQuery解决方案也可以)。我的代码缺少什么？

Answer 1

这应该可以做到:

.posts-grid .post {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.posts-grid .read-more {
    margin-top: auto;
}

别忘了prefix .

.posts-grid {
  margin-top: 25px;
  display: flex;
  flex-wrap: wrap;
}
.posts-grid > [class*='col-'] {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}
.posts-grid .post {
  background: #fff;
  border-top: 1px solid #d5d5d5;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.11);
}
.posts-grid .text {
  padding: 8px;
}
.posts-grid .card-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}
.posts-grid .read-more {
  padding: 0 8px 8px 8px;
}
.posts-grid .text-muted {
  margin-bottom: 8px;
}
.posts-grid .thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}
.posts-grid p {
  text-align: justify;
}
    .posts-grid .post {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .posts-grid .read-more {
        margin-top: auto;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="posts-grid">
    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis id ea dolorum expedita fugit incidunt commodi.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia. Non nostrum, consectetur ipsum doloribus enim maiores a laudantium, odio vel blanditiis.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
      <div class="post">
        <div class="thumbnail">
          <img src="//lorempixel.com/450/300" />
        </div>
        <div class="text">
          <h3 class="card-title">Title</h3>
          <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, vel, quia.</p>
        </div>
        <div class="read-more">
          <a class="btn btn-block btn-sm btn-primary" href="#">Read more</a>
        </div>
      </div>
    </div>
  </div>
</div>