Bootstrap 4 轮播 - d-md-flex align-items-md-center 刹车 col 宽度

Question

无法弄清楚为什么在桌面上查看时第二张幻灯片会导致如此巨大的变化/变化。它似乎是将 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&nbsp;This Product<sup>&reg;</sup>&nbsp;</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, consectetur adipiscing elit. Sed bibendum fringilla eros, 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, consectetur adipiscing elit. Sed bibendum fringilla eros, 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, consectetur adipiscing elit. Sed bibendum fringilla eros,</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>

Answer 1

行的宽度会根据内容而变化，因为您的行位于 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&nbsp;This Product<sup>&reg;</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, consectetur adipiscing elit. Sed bibendum fringilla eros, 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, consectetur adipiscing elit. Sed bibendum fringilla eros, 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, consectetur adipiscing elit. Sed bibendum fringilla eros,</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>

Answer 2

试试这个代码：

<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&nbsp;This Product<sup>&reg;</sup>&nbsp;</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, 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>
                </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>

说明

• 我改变了行标签的位置，推荐圈必须在里面 行。
• 旋转木马内的弯曲不能很好地解决这个问题。 Pe：左边的标签 必须有大小，右边的标签应该利用 所有可用空间。使用固定大小，左侧标签不会 修改。

主要问题是 flex 会根据必须合并的大小对其进行修改。

注意：我留下了边框，这样你就可以看到行为是怎样的。

run code

祝你好运！