使用以内容为中心的引导程序创建网页答案

【问题标题】：Creating a web page with bootstrap with content centred使用以内容为中心的引导程序创建网页
【发布时间】：2017-07-06 15:34:46
【问题描述】：

我所有的页面都使用整个宽度。

我希望页面自动符合具有大边距内容的页面，但我似乎无法做到。

我正在使用 react 和 bootstrap。

我尝试过使用以下内容，但它仍然使用 100% 的宽度...

        <div class="container">
            <div class="row">
                <h1>Scheduler goes here!</h1>
            </div>
        </div>

我也尝试添加这个包装器 div

  <div class="col-sm-12">

编辑：目前这对我不起作用。我尝试按照下面的答案添加容器，但是我的导航栏显示正确，但页面位于屏幕的左边距。

我正在使用 react-bootstrap。

我的菜单，正确显示如下

  <Navbar>
            <Navbar.Header>
                <Navbar.Brand>
                    <a href="#">Jobs Ledger</a>
                </Navbar.Brand>
            </Navbar.Header>
            <Nav pullLeft>
                <LinkContainer to="/">
                    <NavItem eventKey={1}>Schedule</NavItem>
                </LinkContainer>
                <NavDropdown eventKey={2} title="Clients" id="basic-nav-dropdown">
                    <LinkContainer to="/fetchdata">
                        <MenuItem eventKey={2.1}>Fetch Data</MenuItem>
                    </LinkContainer>
                </NavDropdown>
                <NavDropdown eventKey={6} title="Original" id="basic-nav-dropdown">
                    <LinkContainer to="/counter">
                        <MenuItem eventKey={6.1}>Counter</MenuItem>
                    </LinkContainer>
                    <LinkContainer to="/fetchdata">
                        <MenuItem eventKey={6.2}>Fetch Data</MenuItem>
                    </LinkContainer>
                </NavDropdown>
            </Nav>
            <Nav pullRight>
                <LinkContainer to="/">
                    <NavItem eventKey={1}>Home</NavItem>
                </LinkContainer>
                <LinkContainer to="/counter">
                    <NavItem eventKey={2}>Counter</NavItem>
                </LinkContainer>
                <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                    <LinkContainer to="/fetchdata">
                        <MenuItem eventKey={3.1}>Fetch Data</MenuItem>
                    </LinkContainer>
                </NavDropdown>
            </Nav>
        </Navbar>

我的布局页面如下：

        <div class='container'>
            <div>
                <NavMenu />
            </div>
            <div>
                {this.props.body}
            </div>
        </div>

而我的页面主体（紧贴屏幕左侧）是

        return (
        <div class="container">
                <h1>Scheduler goes here!</h1>
        </div>

body 应该与导航栏对齐...

【问题讨论】：

标签： css twitter-bootstrap reactjs

【解决方案1】：

将容器设置为特定宽度，例如 50%。然后你可以通过 CSS 来抵消这一点，容器中的其余子元素将拥有 50% 的 100%。

【讨论】：

【解决方案2】：

将容器设置为固定宽度并在容器中放置边距

.container{
   width: 500px;
   margin: 0 auto;
}

【讨论】：