Bootstrap 5自定义$position-values不生效问题求助

尝试用Bootstrap定位类在轮播图上方定位文本，但默认的0、50、100这些值无法满足外观需求。于是创建了自定义SCSS文件，向$position-values中添加新值，通过修改主题颜色确认编译正常（颜色修改生效），但新增的定位值完全不生效，甚至连默认值也失效了。

自定义SCSS代码 #

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

$primary: blue;
$secondary: green;

$new-position-values: (
  10: .1,
  20: .2,
  30: .3,
);

$position-values: map-merge($position-values, $new-position-values);

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

JSX文件代码 #

import React from 'react';
import Link from "next/link";
import { urlFor } from '../lib/client';
import useScript from '../hooks/useScript';


const Carousel = ({gallery}) => {

  return (
    <div className="d-block w-75 mx-auto">
        <div id="carouselExampleIndicators" className="carousel slide" data-bs-ride="carousel">
          
          
            <div className="carousel-indicators">
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
            <div className="carousel-inner">
                <div className="carousel-item active" data-bs-interval="3000">
                <img src={urlFor(gallery.images[0])} className="d-block w-100" alt="..."/>
                </div>
                <div className="carousel-item" data-bs-interval="3000">
                <img src={urlFor(gallery.images[1])} className="d-block w-100" alt="..."/>
                </div>
                <div className="carousel-item" data-bs-interval="3000">
                <img src={urlFor(gallery.images[2])} className="d-block w-100" alt="..."/>
                </div>
                <div className="carousel-item" data-bs-interval="3000">
                <img src={urlFor(gallery.images[3])} className="d-block w-100" alt="..."/>
                </div>

                
                <nav className="navbar navbar-expand-lg navbar-light bg-primary"></nav>
                <h3 className="position-absolute top-50 start-0 p-2">Sample</h3>
                <h1 className="position-absolute top-30 start-0 p-2">Text</h1>


            </div>
            <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                <span className="visually-hidden">Previous</span>
            </button>
            <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                <span className="carousel-control-next-icon" aria-hidden="true"></span>
                <span className="visually-hidden">Next</span>
            </button>
        </div>
        

    </div>
      
  )
}

export default Carousel

核心问题分析 #

1. 变量类型错误：Bootstrap默认的$position-values是列表（list）类型，而非映射（map）。你用map-merge合并列表与映射，直接破坏了原有变量结构，导致Bootstrap无法生成任何定位工具类，这也是默认值失效的原因。
2. 文本层级错误：绝对定位的文本直接放在carousel-inner中，没有嵌套进carousel-item内部，会导致定位基准错误（相对于页面而非轮播项）。

修复步骤 #

1. 修正SCSS变量扩展逻辑 #

把映射合并改为列表操作，直接扩展或重定义$position-values：

@import '../../node_modules/bootstrap/scss/functions';
@import '../../node_modules/bootstrap/scss/variables';

$primary: blue;
$secondary: green;

// 方法1：直接重定义包含所有值的列表
$position-values: 0, 10, 20, 30, 50, 100;

// 方法2：在原有列表后追加新值
// $position-values: append($position-values, (10,20,30), 'comma');

@import '../../node_modules/bootstrap/scss/bootstrap.scss';

2. 调整JSX中文本的嵌套结构 #

将定位文本放入每个carousel-item内部，确保相对于轮播项定位：

<div className="carousel-inner">
  <div className="carousel-item active" data-bs-interval="3000">
    <img src={urlFor(gallery.images[0])} className="d-block w-100" alt="..."/>
    {/* 文本嵌套进carousel-item内部 */}
    <h3 className="position-absolute top-50 start-0 p-2 text-white">Sample</h3>
    <h1 className="position-absolute top-30 start-0 p-2 text-white">Text</h1>
  </div>
  {/* 其余carousel-item重复上述结构 */}
</div>

3. 验证编译结果 #

重新编译SCSS后，检查生成的CSS中是否存在如下类：

.top-10 { top: 10% !important; }
.top-20 { top: 20% !important; }
.top-30 { top: 30% !important; }

若存在则说明变量修改生效，此时top-30等自定义类即可正常使用。

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