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

编程问答 2022-05-11

问题描述

无法弄清楚为什么在桌面上查看时第二张幻灯片会导致如此巨大的变化/转变。这似乎是将 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,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&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,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&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,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 根据它必须合并的内容的大小来修改它。

注意：我留下了边框，以便您可以看到行为如何。

run code

祝你好运！

bootstrap-4flexboxhtml