使用引導程序頁面佈局

使用引導程序3可以獲得此頁面佈局嗎？使用引導程序頁面佈局

部首是流體。導航寬度爲250px，高度爲100％。內容佔用剩下的部分。

當談到內容時，Bootstrap很棒。但是，當我按照自己想要的方式分割頁面時，我很難獲得理想的結果。

可以去這裏提到的Flexbox Bootstrap 100% height with navbar，但我需要支持IE10。

完全可以在Bootstrap中進行微小的調整，還是必須使用單獨的文件進行佈局？

來源

2017-08-02 ChrVik

獲得此結果的最快方法是使用CSS單獨文件進行佈局。這將更容易更新和更清潔。 –

試試下面的代碼

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-12 col-lg-12" style="background-color:grey; text-align:center;">Header</div> 
 
    </div> 
 
    <div class="row" > 
 
    <div style="background-color:lightcyan; text-align:center;" class="col-xs-4 col-sm-4 col-lg-4">Navigation</div> 
 
    <div style="background-color:lightgrey; text-align:center;" class="col-xs-8 col-sm-8 col-lg-8">Content</div> 
 
    </div> 
 

 
    
 
</body> 
 
</html>

來源

2017-08-02 11:25:52

您可以使用引導而是使用自定義的CSS文件。 example here

來源

2017-08-02 11:26:47

這可能是一個CSS文件鏈接到您的引導設計。更新會更容易，並且您將在全局佈局設計和內容設計之間有明確的分離。

html, body { 
 
    margin : 0px; 
 
    width : 100%; 
 
    height : 100vh; 
 
} 
 

 
body .header { 
 
    width : 100% 
 
    height : 10vh; 
 
    background-color : #aaa; 
 
} 
 

 
body .flex-line { 
 
    display : flex; 
 
} 
 

 
body .nav { 
 
    width : 250px; 
 
    height : 100%; 
 
    background-color : #ccc; 
 
} 
 

 
body .content { 
 
    width : 100%; 
 
    height : 100%; 
 
    background-color : #eee; 
 
} 
 

 
p { 
 
    text-align : center; 
 
    font-family : Arial; 
 
}

<html> 
 
    
 
    <body> 
 
    
 
    <div class="header"> 
 
    <p>Header</p> 
 
    </div> 
 
    
 
    
 
    <div class="flex-line"> 
 
    <div class="nav"> 
 
     <p>Navigation</p> 
 
    </div> 
 

 
    <div class="content"> 
 
     <p>Content</p> 
 
    </div> 
 
    </div> 
 
    
 
    </body> 
 
    
 
</html>

我希望這將是有益的。

來源

2017-08-02 11:31:43

使用引導程序頁面佈局

回答

相關問題