如何解决为什么我的引导卡彼此对齐,而不是在页面上并排排列?
为什么我的引导卡彼此对齐,而不是在页面上并排放置?
这是我拥有的html。 Web其余部分运行正常。不知道这些卡是什么问题,以及为什么它们不能并排对齐。
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>This is just going to be information about about
the company and wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
</div>
解决方法
您忘记关闭div标签。这应该起作用。
<div class="container-fluid padding">
<div id="row" class="row padding">
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="grow.png" />
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p>
This is just going to be information about about the company and
wh
</p>
<a href="#" class="btn btn-outline-secondary">See Profile</a>
</div>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。