Bootstrap 3 卡水平对齐答案

【问题标题】：Bootstrap 3 cards align horizontallyBootstrap 3 卡水平对齐
【发布时间】：2021-07-20 20:20:30
【问题描述】：

我想要在 Bootstrap 中水平的卡片类型结构。 Something like this and need pagination too for more cards.

谁能帮我做这个设计

【问题讨论】：

标签： css user-interface twitter-bootstrap-3 responsive-design bootstrap-cards

【解决方案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>

【讨论】：