以內容爲中心創建帶引導程序的網頁

我希望網頁符合頁面的內容具有較大的利潤自動和我似乎無法做到這一點。

我正在使用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>

身體應與導航欄線...

來源

2017-02-17 si2030

將容器設置爲某個寬度，例如50％。然後你可以通過CSS來抵消它，容器中的其他子元素將有50％的100％。

來源

2017-02-17 08:17:02 Englund

設置在容器一個固定的寬度，並把餘量在容器

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

來源

2017-02-17 08:17:22

以內容爲中心創建帶引導程序的網頁

回答

相關問題