Bootstrap 卡片没有向下移动

Question

我正在尝试就我的 bootstrap 卡片寻求帮助。我有 4 张卡片，它们水平延伸到页面的整个宽度。当在移动设备上访问该网站时，它们仍然保持水平伸展然后垂直伸展。我希望他们保持一个在另一个之上。帮助将不胜感激。谢谢

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<div class="row">
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/harris.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Bill Harris</h4>
        <h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
        <p class="card-text">Mr. Harris is going to be Maui for Halloween!</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/smigel" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/smiegel.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Emily Smigel</h4>
        <h6 class="card-subtitle mb-2 text-muted">Counselor</h6>
        <p class="card-text">Ms. Smigel is a Fullstack Developer.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/harris" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="/images/personal/krzyminski.jpeg" alt="">
      <div class="card-body">
        <h4 class="card-title">Marcy Krzyminski</h4>
        <h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
        <p class="card-text">Ms. Krzyminski is a computer repair technician.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/krzyminski" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 my-4" style="max-width:25% !important;">
    <div class="card">
      <img class="card-img-top" src="http://placehold.it/550x550" alt="">
      <div class="card-body">
        <h4 class="card-title">Patti Walther</h4>
        <h6 class="card-subtitle mb-2 text-muted">Secretary</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente esse necessitatibus neque.</p>
      </div>
      <div class="card-footer">
        <a href="/aboutme/walther" class="btn btn-primary">Find Out More!</a>
      </div>
    </div>
  </div>
</div>

Answer 1

要调整项目将在 Bootstrap 中占用的列数，请使用媒体查询和 col-X-n，其中 X 是 xs、[=13 中的屏幕大小=]，等等，n 是列数 (1-12)。

在您的情况下，添加 class col-xs-6 将使您的 4 列布局分成宽度较小的 2 列。 col-xs-12 反而会给你 1 列。

Here's the Bootstrap responsive breakpoint reference 好措施！

Answer 2

您可以使用 flexbox 和媒体查询来解决这个问题：

@media (max-width: 600px) {
  .row{
    display: flex;
    flex-direction: column;
  }
}

其中 .row 是卡片的容器

Bootstrap 卡片没有向下移动

Bootstrap Cards Not Shifting Down

html

css

bootstrap-4

responsive

bootstrap-cards