如何让Bootstrap容器适配网页全屏宽度？

问题原因 #

你用的Bootstrap container 类默认自带左右内边距，并且在不同屏幕断点下有最大宽度限制，所以手动修改宽度百分比不会生效——框架样式优先级更高。

解决方案 #

直接把 container 替换成 container-fluid 类，这个类会让容器自适应占满整个视口宽度，同时保留框架预设的合理内边距：

import NavigationBar from "./components/NavigationBar"
import ListGroup from './components/ListGroup';

function App() {
    return (
        <div>
            <NavigationBar />
            {/* 替换container为container-fluid */}
            <div className="container-fluid">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    {/* 把col-lg-auto改成col，让Feed列自动填充剩余宽度 */}
                    <div className="col">
                        Feed
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;

额外说明 #

• 如果希望容器完全贴紧屏幕边缘（去掉所有内边距），可以给容器再加 px-0 类：className="container-fluid px-0"，但通常不推荐这么做，会让内容显得拥挤。
• 原代码中Feed列用的 col-lg-auto 是根据内容宽度自适应，改成 col 后会自动填充剩余的页面宽度，更符合常见的布局需求。

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