コンテンツを中心としたブートストラップを持つWebページを作成する

Question

すべてのページが幅全体を使用します。

私は、ページが自動的に大きなマージンを持つページに適合するようにしたいと思います。

私は反応とブートストラップを使用しています。

私もこのラッパーのdiv

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

EDIT追加しようとした私は、以下のものを使用して試してみましたが、それはまだ

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

...幅の100％を使用しています。これは を私のために今は働いていない。私は以下の答えに従ってコンテナを追加しようとしましたが、私のnavbarは正しく表示されていますが、ページは画面の左端にあります。

私は反応ブートストラップを使用しています。

<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> 

体がナビゲーションバーに沿ったものでなければなりません

...

01です

Answer 1

コンテナを一定の幅（50％など）に設定します。次に、CSSでこれを相殺することができ、コンテナ内の子要素の残りの部分は50％の100％を持ちます。

Answer 2

は、コンテナに固定幅を設定し、容器にマージンを入れ

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