引导卡不向下移动

Question

我正在尝试获得有关引导卡的帮助。 我有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> 

Answer 1

要调整Bootstrap中项目的列数，请使用媒体查询和col-Xn ，其中X是xs ， sm等的屏幕大小， n是列数（1-12）。

在您的情况下，添加类col-xs-6可以使您的4列布局分成2个较小宽度的列。 col-xs-12会给您1列。

这是Bootstrap响应式断点参考 ，非常有用！

Answer 2

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

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

.row是卡片的容器