如何为Bootstrap4轮播中Perfect-scrollbar滚动条设置固定宽度并居中？

我明白你遇到的困扰了——Perfect Scrollbar的默认轨道样式会直接继承容器宽度，直接设置width和margin: auto往往达不到预期效果。这里有个简单的CSS调整方案，能帮你实现300px固定宽度且居中的滚动条轨道：

修改后的CSS代码 #

找到你自定义的.ps__rail-x样式，替换成下面的代码：

#carousel .ps__rail-x {
  background: #5C5C5C;
  height: 3px;
  width: 300px; /* 设置固定宽度 */
  left: 50%; /* 将轨道左边缘定位到容器中点 */
  transform: translateX(-50%); /* 向左偏移自身宽度的50%，实现完全居中 */
  bottom: 10px; /* 可选：调整轨道和内容的间距，避免和底部标题重叠 */
}

原理说明 #

• Perfect Scrollbar的水平轨道（.ps__thumb-x的父元素.ps__rail-x）默认是绝对定位的，传统的margin: 0 auto在绝对定位元素上不生效，所以我们改用left: 50% + transform: translateX(-50%)的组合来实现精准居中。
• 设置width: 300px可以覆盖插件默认的“继承容器宽度”行为，强制轨道保持固定宽度。
• 可选的bottom属性可以调整轨道和轮播内容的距离，避免和底部的caption区域重叠。

额外优化提示 #

如果希望滚动条滑块（.ps__thumb-x）也和轨道宽度匹配，可以给滑块添加上width: 100%，这样滑块会自动适应轨道的300px宽度：

#carousel .ps__thumb-x {
  height: 3px;
  margin-bottom: -2px;
  border-radius: 0;
  background: #fff;
  width: 100%; /* 滑块宽度匹配轨道 */
}

这样修改后，你的滚动条轨道就会保持300px宽度并始终居中显示了。

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