如何解决Bootstrap 4 carousel - d-md-flex align-items-md-center 刹车 col 宽度
无法弄清楚为什么在桌面上查看时第二张幻灯片会导致如此巨大的变化/转变。这似乎是将 d-md-flex align-items-md-center 添加到封闭 div 的结果。有没有我忽略的东西或我应该使用的替代方法？
<div class="container-md py-5">
<div class="testimonial-circle rounded-circle bg-white px-n2 px-sm-0 mx-n2 mx-sm-0 d-md-flex align-items-md-center">
<div class="row align-items-center">
<div class="col-12 col-md-4 offset-md-1 mt-5 text-center">
<h2 class="font-weight-bold">People lovE<br />the This Product<sup>®</sup> </h2>
<p class="d-none d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
</div>
<div class="col-10 col-md-5 offset-1">
<!-- start carousel -->
<div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1"></li>
<li data-target="#testimonialSlider" data-slide-to="2"></li>
<li data-target="#testimonialSlider" data-slide-to="3"></li>
<li data-target="#testimonialSlider" data-slide-to="4"></li>
<li data-target="#testimonialSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner pt-2 d-block">
<div class="carousel-item active">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed bibendum fringilla eros,sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">This brakes the layout Why?</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,sed accumsan odio semper sit amet. Ut viverra ex.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,sed accumsan odio semper sit amet.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<p class="d-md-none text-center"><a class="btn btn-outline-primary" href="/oral-health/products/dental-water-flosser/WF-11W010-1/">Read Reviews</a></p>
</div>
</div>
解决方法
您的行的宽度会根据内容而变化，因为您的行位于 testimonial-circle 分区内。该行需要是容器的子项。如果您需要自定义，您可以将您的客户样式添加到容器中。
你会遇到的另一个问题是，因为你的轮播都是文本，所以高度会有所不同。防止文本框跳跃的最简单方法是使用 jQuery 规范化所有幻灯片高度。
更新：要在轮播项目中垂直居中块引用，您可以根据此答案 How to vertically center a Bootstrap carousel-caption? 使用变换。
function normalizeSlideHeights() {
$('.carousel').each(function() {
var items = $('.carousel-item',this);
// reset the height
items.css('height','auto');
// set the height
var maxHeight = Math.max.apply(null,items.map(function() {
return $(this).outerHeight()
}).get());
items.css('height',maxHeight + 'px');
})
}
$(window).on(
'load resize orientationchange',normalizeSlideHeights
);<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
.carousel-indicators {
bottom: -9px;
margin-bottom: 0;
}
.carousel-indicators li {
background-color: #C7C7C7;
}
.carousel-item {
padding: 4px 0;
}
.carousel-item.active {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.blockquote {
top: 50%;
transform: translateY(-50%);
position: relative;
}
</style>
<div class="container-md py-5">
<div class="row align-items-center">
<div class="col-12 col-md-4 offset-md-1 text-center">
<h2 class="font-weight-bold mb-4">People LOVE<br />the This Product<sup>®</sup></h2>
<p class="d-none mb-0 d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
</div>
<div class="col-10 col-md-5 offset-1">
<!-- start carousel -->
<div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1"></li>
<li data-target="#testimonialSlider" data-slide-to="2"></li>
<li data-target="#testimonialSlider" data-slide-to="3"></li>
<li data-target="#testimonialSlider" data-slide-to="4"></li>
<li data-target="#testimonialSlider" data-slide-to="5"></li>
</ol>
<div class="carousel-inner pt-2 d-block">
<div class="carousel-item active border" style="height: 150px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed bibendum fringilla eros,sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item border" style="height: 170px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">This breakes the layout Why?</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item border" style="height: 150px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item border" style="height: 150px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">Lorem ipsum dolor sit amet,sed accumsan odio semper sit amet. Ut viverra ex.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item border" style="height: 150px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">Lorem ipsum dolor sit amet,sed accumsan odio semper sit amet.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item border" style="height: 150px;">
<blockquote class="blockquote">
<p class="mb-0 text-justify">Lorem ipsum dolor sit amet,</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
<p class="d-md-none w-100 mt-4 text-center"><a class="btn btn-outline-primary" href="/oral-health/products/dental-water-flosser/WF-11W010-1/">Read Reviews</a></p>
</div>
</div>试试这个代码：
<div class="container-md py-5">
<div class="row align-items-center" style="border: 1px solid blue;">
<div class="testimonial-circle rounded-circle bg-white d-flex justify-content-start">
<div class=" text-center" style="width: 25rem; border: 1px solid red;">
<h2 class="font-weight-bold">People LOVE<br />the This Product<sup>®</sup> </h2>
<p class="d-none d-md-block"><a class="btn btn-outline-primary" href="#">Read Reviews</a></p>
</div>
<div class=" " style="flex: 1; border: 1px solid green;">
<!-- start carousel -->
<div id="testimonialSlider" class="carousel slide mt-2" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#testimonialSlider" data-slide-to="0" class="active"></li>
<li data-target="#testimonialSlider" data-slide-to="1" ></li>
</ol>
<div class="carousel-inner pt-2 ">
<div class="carousel-item active">
<blockquote class="blockquote">
<p class="mb-0">This brakes the layout Why?</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet,sed accumsan odio semper sit amet. Ut viverra ex velit velit sit.</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
<div class="carousel-item">
<blockquote class="blockquote">
<p class="mb-0">This brakes the layout Why?</p>
<footer class="blockquote-footer"><cite title="Source Title">Verified User</cite></footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<p class="d-md-none text-center"><a class="btn btn-outline-primary" href="/oral-health/products/dental-water-flosser/WF-11W010-1/">Read Reviews</a></p>
</div>
</div>
说明
- 我改变了行标签的位置，推荐圈必须在里面 行。
- 从轮播中的 flex 没有很好地解决这个问题。 Pe：左边的标签 必须有一个尺寸，右边的标签应该利用 所有可用空间。固定大小，左边的标签不会 修改。
主要问题是 flex 根据它必须合并的内容的大小来修改它。
注意：我留下了边框，以便您可以看到行为如何。
祝你好运！
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
