[英]horizontal cards side by side html bootstrap
如何實現 2 張水平(行)卡並排? 這是我到目前為止的代碼,當我復制 n 粘貼它時,卡片碰撞 n 變得一團糟。
我需要像這樣並排放置卡片
<div class="card-body p-0 d-flex justify-content-around flex-wrap">
<div class="col-md-3 ">
<div class="card card-style1">
<div class="card-header s-2">
<h3 class="card-title">Data </h3>
</div>
<div class="card-body d-flex justify-content-center" style="overflow-y: auto; list-style-type:none;">
<table class="data-info-table">
<tr data-toggle="tooltip" data-placement="left" title="Data Name">
<td><i class="fas fa-user "></i></td>
<td><textarea class="form-control asd" id="client" rows="1" type="text" style="resize: none; overflow-y: auto;"></textarea>
</td>
</tr>
</tr>
</div>
</div>
</div>
</div>
直接從Bootstrap Card復制。 我剛剛為兩張卡添加了一個帶有 class="row" 和 col-6 的新父 div。
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="row col-12"> <div class="card col-6"> <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> <div class="card col-6"> <img class="card-img-top" src="https://images.pexels.com/photos/20787/pexels-photo.jpg?cs=srgb&dl=adorable-animal-cat-20787.jpg&fm=jpg" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div> </div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.