如何解决在Bootstrap v5.0.0-alpha1中我可以使用什么介质BS 3/4?
我想在Bootstrap v5.0.0-alpha1中使用媒体对象,但是如何?
在Bootstrap 3和4中,我这样使用它:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="media border p-3">
<img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
class="mr-3 mt-3 rounded-circle" style="width:60px;">
<div class="media-body">
<h4>John Doe <small>Posted on February 19,2016</small></h4>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
在v5.0.0-alpha1中,我可以为媒体对象使用哪个类?我在Bootstrap 5中找不到名为“ media”的任何类。
解决方法
自从Bootstrap在版本5中删除了“媒体对象”以来,您现在将不得不使用实用程序类。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css">
<div class="container mt-3">
<h2>Media Object</h2>
<p>Create a media object with the .media and .media-body classes:</p>
<div class="d-flex border p-3">
<img src="https://cdn.pixabay.com/photo/2016/11/18/23/38/child-1837375_960_720.png" alt="John Doe"
class="flex-shrink-0 mr-3 mt-3 rounded-circle" style="width:60px;height:60px;">
<div>
<h4>John Doe <small>Posted on February 19,2016</small></h4>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit,sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.</p>
</div>
</div>
</div>
,
Bootstrap 5 的文档说明了如何使用卡片来实现旧的媒体对象布局。 https://getbootstrap.com/docs/5.0/components/card/#horizontal
例如:
<div class="card mb-3 border-0">
<div class="row g-3">
<div class="col-md-4">
<svg class="bd-placeholder-img" width="100%" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image</text></svg>
</div>
<div class="col-md-8">
<div class="card-body p-0">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。