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

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

  •  0
  • 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;
    

    以下是网页的外观:

    ReactContainerNotFullWidth

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

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

    1 回复  |  直到 5 月前
        1
  •  2
  •   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;