Bootstrap轮播组件中负边距（negative margin）的工作原理相关疑问

我制作了一个Bootstrap 4轮播的演示示例，将过渡动画时长调整为30秒，方便大家检查查看JavaScript动态添加的CSS样式：

自定义CSS代码：

.carousel-item {
  transition: transform 30s ease-in-out!important;
}

完整HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://getbootstrap.com/docs/4.6/dist/js/bootstrap.bundle.js"></script>
<link href="https://getbootstrap.com/docs/4.6/dist/css/bootstrap.css" rel="stylesheet"/>
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
    <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: First slide" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"></rect><text x="50%" y="50%" fill="#555" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

观察到的现象：所有slide都被设置了margin-right: -100%属性，激活态的slide会被添加translateX(-100%)的transform变换。 #

问题1解答 #

按照CSS常规逻辑，margin-right: -100%会为每个slide生成负空间，导致所有slide叠加显示，但实际运行时所有slide是横向并排排列的，请问这是什么原因？

这是float浮动布局结合负外边距的特殊排列规则导致的，核心原因两点：

• Bootstrap 4的.carousel-item默认同时配置了width: 100%、float: left、margin-right: -100%三个核心布局属性
• 浮动元素的水平占据空间计算公式为 自身宽度 + 水平外边距，每个轮播项的水平占据空间为 100% + (-100%) = 0，因此父容器的同一行可以无限制放置该类浮动元素，所有轮播项都会被排在同一行形成横向并排效果，不会换行也不会叠加。
  对照案例没有复现该效果，是因为案例中仅设置了float: left，没有和Bootstrap轮播项保持完全一致的width: 100% + margin-right: -100%属性组合。

问题2解答 #

如果只有激活态的slide会被添加transform变换，为什么位于其右侧的slide也会同步跟随激活态slide发生位移？

这是浮动流式布局的固有特性：所有轮播项都是同级的相邻左浮动节点，后面浮动元素的水平定位，以前面相邻浮动元素的最终渲染位置作为参考基准。
给激活态轮播项添加的translateX(-100%)属于元素的视觉偏移，在浮动布局的位置计算逻辑中，元素偏移后的最终位置会作为后续浮动元素的定位参考，因此激活态元素向左偏移多少，后面所有相邻的浮动轮播项都会同步向左偏移多少，视觉上就表现为同步位移，不需要给右侧元素额外添加transform属性。

内容的提问来源于stack exchange，提问作者user31782