Question

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

我的卡片：

<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，sm等中的屏幕大小，以及n是列数（1-12）。

在您的情况下，添加类col-xs-6将使它成为可能，因此您的4列布局分成两列，宽度较小。 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是卡片的容器

引导卡不向下移动

2 个答案: