Bootstrap主體重疊標題，而不是居中

嗨，大家好，我嘗試創建一個第一次使用bootstrap的websie，並嘗試理清基本佈局。不過，我現在有兩個問題。Bootstrap主體重疊標題，而不是居中

1我的主體，我有白色不在頁面中間。我試圖使主網頁看起來是這樣的：

----------------------------------------------- 
| |       |    | 
|-----------------------------------------------       
| |Logo    Nav Bar|    | 
|-----------------------------------------------       
| |       |    | 
| |       |    | 
| |  Body     |    | 
| |       |    | 
| |       |    | 
|-----------------------------------------------       
| |Logo   Info  |    | 
|-----------------------------------------------       
| |       |    | 
-----------------------------------------------

但是由於某種原因，身體貼在左邊，而不是在中間。

我的第二個問題是頂部的導航欄。因爲它沒有卡在頂部，這意味着當我滾動時，白色的身體會重疊，當我走下來，這是一個大問題。如果導航欄卡在頂部，這不是一個問題，但我希望我的導航欄不在頂部，但像80像素下。

對此的任何幫助將是偉大的。

HTML：

<div class="mainHome"> 
    <div class="container"> 
    </div> 
</div>

CSS：

來源

2016-02-19 Nevershow2016

稍微難以理解你要達到的目標，默認情況下大多數元素都是全寬。嘗試將所有內容包裝在另一個.container div中。 –

不知道你的意思，就像我只想我的主體，我在白色的顏色在中心。 – Nevershow2016

OK了引導網格系統的基礎知識，試試這個。

<div class="container" id="main-container"> 
    <div class="row"> 
    <div class="col-md-12"> 
     <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div class="container"> 
      <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <div class="logo"> 
       <img src="Image/Logo.png" class="img-responsive"/> 
      </div> 
      </div> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Home</a> 
       </li> 
       <li><a href="#about">About</a> 
       </li> 
       <li><a href="login.php">Login</a> 
       </li> 
       <li><a href="#about">Become A member</a> 
       </li> 
      </ul> 
      </div> 
     </div> 
     </div> 
     <div class="mainHome"> 
      <div class="container"> 
      </div> 
     </div> 
     <div class="footer"> 
     <div class="container"> 
      <div class="navbar-text pull-left"> 
      <p> &copy 2016 </p> 
      </div> 
      <div class="navbar-text pull-right"> 
      <a href="#"><i class="fa fa-facebook-square fa-2x"></i></a> 
      <a href="#"><i class="fa fa-twitter fa-2x"></i></a> 
      <a href="#"><i class="fa fa-google-plus fa-2x"></i></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div>

，並添加這個CSS：

body { 
    text-align: center; 
} 

#main-container { 
    text-align: left; 
    margin: 0 auto; 
}

祝你好運！

來源

2016-02-19 17:58:45

引導要求所有內容是含有元件，其可以具有類「容器」或「容器流體」內。從那裏你需要使用Bootstrap網格系統，使用行和列。所以，你的結構是這樣的形式：

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
      /* content here */ 
     </div> 
    </div> 
</div>

因此，在你的代碼中，「容器」類必須是最外面的分工，裏面坐了一切。

您可以瞭解這裏http://getbootstrap.com/css/#overview-container

來源

2016-02-19 17:54:28 andydavies

Bootstrap主體重疊標題，而不是居中

回答

相關問題