如何在水平线上对齐3张牌
如何在水平线上对齐3张牌
提问于 2020-10-17 17:55:15
我最近开始使用html，css和bootstrap-4，我正在尝试用一个导航栏，4张卡片和一个带有信息的页脚做一个页面，我使用bootstrap来制作行和工具，但它们似乎不像我想要的那样对齐。在这种混乱中我能做些什么？
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link rel="stylesheet" href="MYCELIUM.CSS">
<link rel="stylesheet" href="activities.css">
</head>
<script src="https://kit.fontawesome.com/a8809e8f88.js" crossorigin="anonymous"></script>
<body>
<div class="col-md-4 col-sm-6 boxy" class="wrapper">
<div class="pop-up">
<div class="front">
<img class="girlimg" src="girl.jpg" alt="asdasda">
<p><h2 class="activname">Guided hiking tours</h2></p>
<button class="activbutt" type="button" name="button">SEE DETAILS</button>
<div class="details">
<div class="duration">
<i class="fas fa-clock">Duration</i>
</div>
<div class="people">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
<p></p><br>
<div class="pop-up-2">
<div class="card-2">
<img class="girlimg" src="bike.jpg" alt="bikeactiv">
<p> <h2 class="activname1">Rent a bike(4 hours)</h2> </p>
<button class="activbutt1" type="button" name="button1">SEE DETAILS</button>
</div>
<div class="details">
<div class="duration1">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids1">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper1">
<div class="pop-up-3">
<div class="card-3">
<img class="girlimg" src="climbing.jpg" alt="clim">
<p> <h2 class="climbing">Climbing</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span>FULL DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:10</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:3</p>
</div>
</div>
<div class="pop-up-4">
<div class="card-4">
<img class="girlimg" src="canoe.jpg" alt="clim">
<p> <h2 class="climbing">Canoe</h2> </p>
<button class="activbutt1" type="button" name="button">SEE DETAILS</button>
</div>
<div class ="duration2">
<i class="fas fa-clock">Duration</i><br>
<p></p>
<p> <span class="quarter">QUARTER DAY</span> </p>
</div>
<div class="adults1">
<i class="fas fa-user-friends"></i><br>
<p>Max adults:6</p>
</div>
<div class="kids2">
<i class="fas fa-child"></i><br>
<p>Max children:2</p>
</div>
</div>
</div>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-17 18:53:15
你必须制作一个像这样的row：基本结构：
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>你可以让它像这样发展：
<div class="row">
<div class="col row mx-0">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="col"></div>
<div class="col"></div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64401180
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号