Bootstrap5中float-start与start-0区别及定位类失效问题

你遇到的问题本质是混淆了Bootstrap里两类完全不相关的布局工具类的生效规则，没有搞清楚它们的前置依赖：

1. 为什么float-start/float-end生效，start-0无效 #

• float-start、float-end是浮动布局工具类，没有额外前置要求，只要是普通文档流里的元素加上就会生效，让元素靠左/右浮动，所以你能看到效果。
• start-0是定位偏移工具类，本质是给元素加left: 0的CSS规则。这类规则要生效，元素必须先设置非static的定位属性（也就是position: relative/absolute/fixed/sticky其中一种）。你给图片只加了浮动，没加任何定位类，start-0加了等于白加，浏览器根本不会解析这个偏移规则。

2. 卡片上的start/top类失效原因 #

和上面的问题完全一样：你的卡片元素没有加任何定位类，默认是position: static状态，所有top/start/bottom/end的偏移规则对static元素完全无效。
另外你写的start-60、top-60根本不是Bootstrap默认自带的类：Bootstrap默认只提供*-0、*-50、*-100和*-auto这几个档位的偏移类，没有60这个档位，就算你加了定位类，这两个类也不会产生对应的样式。

你要做的是图片铺底、卡片悬浮叠加在图片上的效果，根本不需要用浮动，正确写法是把图片和卡片都放在同一个设置了position-relative的父容器里，给卡片加绝对定位，再调整位置即可，修正后的代码如下：

<section class="py-5">
    <!-- 这个相对定位的div是内部悬浮卡片的定位参考 -->
    <div class="position-relative w-75">
        <img src="img/zayed1200.jpg" class="img-fluid rounded-3 w-100" alt="展示图">
        <!-- 给卡片加position-absolute，top/start类才会生效 -->
        <div class="card bg-black text-white shadow-lg rounded position-absolute top-50 start-50 translate-middle" style="width: 18rem;">
            <div class="card-body">
                <h4 class="card-title">Card title here</h4>
                <p class="card-text">Text of the card etc.</p>
            </div>
        </div>
    </div>
</section>

关键调整点说明： #

• 去掉了图片上多余的float-start：浮动会让父容器高度塌陷，你直接让图片占满父容器宽度就行，不需要浮动。
• 把卡片挪到了相对定位的父容器内部：绝对定位元素的偏移参考是离它最近的非static定位父元素，你之前把卡片放在相对定位div外面，就算加了绝对定位也会相对于整个页面偏移，位置肯定不对。
• 给卡片加了position-absolute：这是让所有偏移类生效的必要前提，少了这个类加再多top/start都没用。
• 用top-50 start-50 translate-middle实现卡片居中：这是Bootstrap官方推荐的绝对定位元素居中写法，不用自己算偏移量，直接就能让卡片在父容器里水平垂直居中。如果你要调整卡片位置，改top/start的数值，或者调整translate的偏移量就行。
• 给黑底卡片加了text-white，不然黑底配默认黑字根本看不见内容。

如果你一定要用60%这类自定义偏移值，直接给卡片加内联样式style="top: 60%; left: 60%; transform: translate(-50%, -50%);"就行，不用硬找不存在的Bootstrap类。

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