使Bootstrap 4卡每行相等

时间：2018-01-28 19:56:01

标签： jquery css twitter-bootstrap css3 flexbox

我正在使用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解决方案也可以）。我的代码丢失了什么？

2 个答案:

答案 0 :(得分：2)

这应该这样做：

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

答案 1 :(得分：1)

Bootstrap 4中有flex的内置类。我想如果你在父包装上使用d-flex - ex .col-xs-12 .d-flex - 应该可行。

有关更多指导，请参阅BOOTSTRAP DOCS。

如果您想查看示例，请访问Codyply

相关问题
最新问题