Bootstrap 3 卡水平對齊

Question

我想要在 Bootstrap 中水平的卡片類型結構。 像這樣的東西也需要分頁以獲得更多卡片。

誰能幫我做這個設計

Answer 1

 .card{ border:1px solid #ccc; border-radius:0.5rem; padding:1rem; box-shadow: 0 0 10px #ccc; box-shadow:0 0 10px #ccc; transition: all 0.2s; }.card:hover{ transform: scale(1.1); } @media screen and (max-width: 568px) {.card{ margin:1rem; }.card:hover{ transform: none; } }

 <div class="container"> <div class="row"> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> <div class="col-sm-3"> <div class="card"> <h3>Exam Preparation</h3> <p>The mind Map for Physics Preparation</p> <div class='btn-toolbar'> <button class="btn btn-sm btn-primary">Edit</button> <button class="btn btn-sm btn-primary">Delete</button> <button class="btn btn-sm btn-primary">share</button> </div> </div> </div> </div> </div>