引導卡不向下移動

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是卡片的容器