代码之家 › 专栏 › 技术社区 › ModernEraCaveman

如何对齐我的Bootstrap容器以适应网页的整个宽度?

bootstrap-5 typescript reactjs css html

ModernEraCaveman · 技术社区 · 5 月前

我是React、Bootstrap、Typescript和web开发的新手,但我正在通过构建一个基本的网页来提高我的技能。现在,我一直在努力让Bootstrap容器适应网页的整个宽度。

我希望带有列表和“提要”列的容器占据页面的整个宽度,而不是在侧面有一些边距。

以下是App.tsx文件的代码:

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

function App() {
    return (
        <div>
            <NavigationBar />
            <div className="container">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    <div className="col-lg-auto">
                        Feed
                    </div>
                </div>
            </div>
            
        </div>
    );
}

export default App;

以下是网页的外观:

导航栏和列表组代码直接从Bootstraps文档中复制。

我尝试将容器div上的样式组件设置为125%甚至200%,但这并没有改变网页的外观。

1 回复 | 直到 5 月前

shotor 5 月前

使用类 container-fluid 而不是 container .

请参阅容器类的大小: https://getbootstrap.com/docs/5.0/layout/containers/#how-they-work

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

function App() {
    return (
        <div>
            <NavigationBar />
            <div className="container-fluid">
                <div className="row align-items-start">
                    <div className="col-md-auto">
                        <ListGroup />
                    </div>
                    <div className="col-lg-auto">
                        Feed
                    </div>
                </div>
            </div>
        </div>
    );
}

export default App;