如何解决如何使用引导程序在其中放入3张卡片的响应式行?
我有3张卡,但是当我将所有三张卡连续放置时,它会出现两张卡,而另一张卡在其下...我想将所有三张卡都排成一列,而且我希望它具有响应性与其他设备。 我希望它像本网站中的卡片一样显示(我的意思不是相同的形状,我的意思是连续且响应迅速): https://linksfire.co/ 这是我的代码:
<div class="container">
<div class="row">
<div class="col-sm-4 card">1</div>
<div class="col-sm-4 card">2</div>
<div class="col-sm-4 card">3</div>
</div>
</div>
解决方法
如果您需要具有3列而不考虑视口宽度,请使用col-4
。
.card
默认具有1px
边框。您有3张卡,它们的border-x的总大小为6px
。这可能是布局中断的原因。因此,您应该在单独的元素上使用.card
。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col-4">
<div class="card">1</div>
</div>
<div class="col-4">
<div class="card">1</div>
</div>
<div class="col-4">
<div class="card">1</div>
</div>
</div>
</div>
</body>
</html>
,
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<body>
<div class="container">
<div class="row">
<div class="col card">1</div>
<div class="col card">2</div>
<div class="col card">3</div>
</div>
<div class="row">
<div class="col card">4</div>
<div class="col card">5</div>
<div class="col card">6</div>
</div>
</div>
</body>
</html>
<div class="container">
<div class="row">
<div class="col card">1</div>
<div class="col card">2</div>
<div class="col card">3</div>
</div>
<div class="row">
<div class="col card">4</div>
<div class="col card">5</div>
<div class="col card">6</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。