使用 Bootstrap 进行页面布局答案

【问题标题】：Page layout using Bootstrap使用 Bootstrap 进行页面布局
【发布时间】：2017-08-02 19:31:43
【问题描述】：

是否可以使用 Bootstrap 3 获得此页面布局？

页眉流畅。导航宽度为 250 像素，高度为 100%。内容占据了其余部分。

在内容方面，Bootstrap 非常出色。但是当以我想要的方式划分页面时，我很难获得想要的结果。

可以使用这里提到的 Flexbox Bootstrap 100% height with navbar，但我需要支持 IE10。

这可以完全在 Bootstrap 中完成并稍作调整，还是我必须为布局使用单独的文件？

【问题讨论】：

获得此结果的最快方法是使用单独的 CSS 文件进行布局。它会更容易更新和清洁。

标签： html css layout twitter-bootstrap-3

【解决方案1】：

试试下面的代码

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

【讨论】：

【解决方案2】：

您可以使用引导程序，但可以使用自定义 css 文件。 example here

【讨论】：

【解决方案3】：

这可能是一个链接到您的引导程序设计的 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>

希望对你有帮助。

【讨论】：