英文:
Bootstrap 5 Hero
问题
我无法弄清楚应该添加/移除哪些类来实现与[Bootstrap边框英雄带有裁剪图像和阴影的预览][1]中相同的图像定位。
[1]: https://getbootstrap.com/docs/5.3/examples/heroes/
我的图像无法位于英雄部分的边缘，而且在移动端比例上看起来更糟。这是目前我的英雄部分的样子：
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">了解更多并支持我们的工作</h1>
<p class="lead">文本</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">捐赠</button>
<button type="button" class="btn btn-secondary btn-lg px-4">志愿者</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
</div>
</div>
</div>
英文:
I am unable to figure out what classes should I add/remove to achieve the same image positioning as in the preview of the Bootstrap Border hero with cropped image and shadows.
My image doesn't sit on the edge of the hero and it looks even worst on mobile scale. Here is what my hero looks like now:
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
<p class="lead">Text</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
<button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
</div>
</div>
</div>
答案1
得分: 1
-
例子中的图片是横向图片，因此完美适合放在 div 的右端。您的图片是竖向的，所以在图片标签上应用这个类：
float-end。 -
对于移动视图，您的代码运行正常，只是图像的对齐出现了扭曲。为此，请在图像标签上应用
w-100和m-auto。您的更新后的图像标签将如下所示：<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
这是可运行的片段。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
<p class="lead">Text</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
<button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" width="75%">
</div>
</div>
</div>
<!-- end snippet -->
英文:
Solutions for both
-
The image in example is an horizontal image hence it fits perfectly on the right end of div. Your image is vertical so apply this class :
float-endon image tag. -
For mobile view. Your code works fine only image alignment is distorted. for which apply
w-100andm-autoto image tag. your updated image tag will look like :<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
here is the working snippet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
<p class="lead">Text</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
<button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" width="75%">
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论