Html 引导4转盘-d-md-flex对齐项目md中央制动器柱宽度

不明白为什么幻灯片二在桌面上观看时会引起如此巨大的变化。这似乎是将d-md-flex align items md center添加到封闭分区的结果。是否有我忽略的内容或我应该使用的替代方法

 <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>

人们喜爱此产品®；







Lorem ipsum dolor sit amet，是一位杰出的体育精英。他是一个爱哭的人，他是一个爱哭的人。维韦拉，我坐在那里
验证用户
这会阻碍布局，为什么
验证用户
Lorem ipsum dolor sit amet，是一位杰出的体育精英
验证用户
Lorem ipsum dolor sit amet，是一位杰出的体育精英。他是一个爱哭的人，他是一个爱哭的人。维韦拉大学
验证用户
Lorem ipsum dolor sit amet，是一位杰出的体育精英。他是一个爱哭的人，他是一个爱哭的人
验证用户
Lorem ipsum dolor sit amet，是一位杰出的体育精英。Sed bibendum fringilla eros
验证用户

行的宽度根据内容而变化，因为您的行位于您的

推荐圈内。该行必须是容器的子行。如果需要自定义，可以将客户样式添加到容器中

另一个问题是，由于旋转木马都是文本，因此高度会有所不同。防止文本框跳转的最简单方法是使用jQuery规范化所有幻灯片高度

更新：要在旋转木马项目中垂直居中块引号，可以根据此答案使用转换


函数normalizeSlideHeights（）{
$（'.carousel'）。每个（函数（）{
变量项=$（“.carousel项”，此项）；
//重置高度
css（'height'，'auto'）；
//设定高度
var maxHeight=Math.max.apply（空，
items.map（函数（）{
return$（this.outerHeight（））
}).get（））；
css（'height'，maxHeight+'px'）；
})
}
$（窗口）(
“加载调整大小方向更改”，
正常滑动高度
);

.转盘指示器{
底部：-9px；
页边距底部：0；
}
.转盘指示器{
背景色：#C7C7C7；
}
.传送带项目{
填充：4px0；
}
.carousel-item.active{
-webkit变换样式：保留-3d；
-moz变换样式：preserve-3d；
变换样式：保留-3d；
}
.区块报价{
最高：50%；
转化：translateY（-50%）；
位置：相对位置；
}
人们喜爱此产品®；







Lorem ipsum door sit amet，Concetetur Adipsicing Elite。他是一个爱哭的人，他是一个爱哭的人。维韦拉，我坐在那里
验证用户
这会破坏布局为什么
验证用户
Lorem ipsum door sit amet，Concetetur Adipsicing Elite
验证用户
Lorem ipsum door sit amet，Concetetur Adipsicing Elite。他是一个爱哭的人，他是一个爱哭的人。维韦拉大学
验证用户
Lorem ipsum door sit amet，Concetetur Adipsicing Elite。塞德比本
<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>