Bootstrap 3：利用頁眉之外的左側和右側列空間

我使用page-header類來居中頁面的主要內容。這會在page-header的兩側創建一些空的列空間，我想利用該空間（可能會添加AdSense橫幅廣告）。Bootstrap 3：利用頁眉之外的左側和右側列空間

這裏是我的嘗試：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test Title</title> 
     <!-- Latest compiled and minified CSS --> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 

     <!-- Latest compiled and minified JavaScript --> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
    </head> 
    <body> 
     <div class="navbar navbar-default navbar-fixed-top"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <a href="" class="navbar-brand">Click Me!</a> 
       </div> 
      </div> 
     </div> 

     <div class="container"> 
      <div class="row"> 
       <div class="col-md-2 pull-left"> 
        <span>Left Ding</span> 
       </div> 

       <div class="col-md-8"> 
        <div class="page-header"> 
         <h2>I'm a big centered page header!</h2> 
        </div> 
       </div> 

       <div class="col-md-2 pull-right"> 
        <span>Right Dong</span> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

我沒有看到Left Ding或Right Dong頁面上的任何地方。這裏是呈現的html：https://jsfiddle.net/bgmjs3qf/

什麼是利用左右列空間的正確方法？

來源

2015-11-02 Dirty Penguin

由於您有固定的導航欄，您必須將填充添加到頁面的頂部。

查看示例和Docs。

body { 
 
    padding-top: 70px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> 
 
    <div class="navbar-header"> <a href="" class="navbar-brand">Click Me!</a> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-2 pull-left"> <span>Left Ding</span> 
 

 
    </div> 
 
    <div class="col-md-8"> 
 
     <div class="page-header"> 
 
     <h2>I'm a big centered page header!</h2> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-md-2 pull-right"> <span>Right Dong</span> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2015-11-02 16:42:32 vanburen

Bootstrap 3：利用頁眉之外的左側和右側列空間

回答

相關問題