css - Bootstrap 3 卡水平对齐

Question

我想要在 Bootstrap 中水平的卡片类型结构。 像这样的东西也需要分页以获得更多卡片。

谁能帮我做这个设计

标签： cssuser-interfacetwitter-bootstrap-3responsive-designbootstrap-cards

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>