1

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

图片：https ://imgur.com/a/W65324F

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

4

2 回答 2

2

要调整项目将在 Bootstrap 中占用的列数，请使用媒体查询以及col-X-n在哪里X是屏幕大小xs，sm等等，n是列数 (1-12)。

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

这是 Bootstrap 响应式断点参考，可以很好地衡量！

于 2018-09-20T22:25:14.073 回答
0

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

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

.row卡片的容器在哪里

于 2018-09-20T22:30:01.930 回答