Bootstrap如何实现页面内容居中、限宽为中间60%并分两列展示

解决方案 #

直接使用Bootstrap 5自带的工具类即可实现需求，无需额外编写自定义CSS：

• 实现60%宽度居中效果：给需要限制宽度的容器添加w-60（宽度设为60%）和mx-auto（左右外边距自动，实现水平居中）两个类，完全匹配你给出的原生CSS效果。
• 实现2列布局：Bootstrap网格系统总宽度为12列，将原<article>的col-4改为col-6，即可实现每行2列的排布效果。

代码修改示例

如果你的需求是仅中间section内容限制为60%居中，顶部header、底部footer保持全屏宽度，直接修改section部分代码即可：

<section class="row w-60 mx-auto">
        <article class="col-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
            vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
            ducimus facilis velit sequi.</article>
        <article class="col-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
            vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
            ducimus facilis velit sequi.</article>
        <article class="col-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
            vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
            ducimus facilis velit sequi.</article>
        <article class="col-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
            vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
            ducimus facilis velit sequi.</article>
        <article class="col-6">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates animi ratione esse, aut
            vel iusto voluptas voluptatum illo suscipit veniam, laudantium qui, quidem nihil eaque repellendus
            ducimus facilis velit sequi.</article>
</section>

如果需要header、section、footer全部内容都限制在60%宽度居中，直接给最外层的<div class="container-fluid">添加w-60 mx-auto类即可。

适配优化建议

为了适配移动端显示，可以将w-60替换为w-100 md:w-60，实现小屏幕下内容占满全屏，中等及以上尺寸屏幕才使用60%宽度居中的效果，适配性更好。

你之前自定义的CSS不生效的原因是选择器优先级低于Bootstrap内置样式，被默认规则覆盖了，使用官方提供的工具类可以避免该问题。

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