Boostrap简单问题，为什么class=row失效了呢？
我想让文字(图片在头部和图片在底部的文字)在同一行，2个卡片第二行，要怎么写才能实现呢<divclass="container-fluid"><divclass="row...
我想让文字(图片在头部和图片在底部 的文字)在同一行，2个卡片第二行，要怎么写才能实现呢<div class="container-fluid"> <div class="row"> <div class="br1"> <p>图片在头部 (card-img-top):</p> <div class="card" style="width:400px"> <img class="card-img-top" src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%"> <div class="card-body"> <h4 class="card-title">John Doe</h4> <p class="card-text">Some example text some example text. John Doe is an architect and engineer</p> <a href="#" class="btn btn-primary">See Profile</a> </div> </div> <div class="br2"> <p>图片在底部(card-img-bottom):</p> <div class="card" style="width:400px"> <div class="card-body"> <h4 class="card-title">Jane Doe</h4> <p class="card-text">Some example text some example text. Jane Doe is an architect and engineer</p> <a href="#" class="btn btn-primary">See Profile</a> </div> <img class="card-img-bottom" src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%"> </div> </div> </div></div>
展开
1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<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">
</head>
<body>
<div>
<div class="row">
<div>
<p>图片在头部 (card-img-top):</p>
<div style="width:400px">
<div>
<h4>John Doe</h4>
<p>Some example text some example text. John Doe is an architect and engineer
</p> <a href="#" class="btn btn-primary">See Profile</a>
</div>
<img src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%">
</div>
</div>
<div>
<p>图片在底部(card-img-bottom):</p>
<div style="width:400px">
<div>
<h4>Jane Doe</h4>
<p>Some example text some example text. Jane Doe is an architect and
engineer</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
<img src="https://static.runoob.com/images/mix/img_avatar.png" style="width:100%">
</div>
</div>
</div>
</body>
</html>
请采纳
更多追问追答
追问
你好，不对啊，我想要的是文字(图片在头部和图片在底部的文字)在同一行，2个卡片在
第二行
追答
上面的代码已经修改了
请采纳
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
