使用引导程序页面布局
问题描述：
使用引导程序3可以获得此页面布局吗？使用引导程序页面布局
部首是流体。导航宽度为250px，高度为100％。内容占用剩下的部分。
当谈到内容时，Bootstrap很棒。但是，当我按照自己想要的方式分割页面时，我很难获得理想的结果。
可以去这里提到的Flexbox Bootstrap 100% height with navbar，但我需要支持IE10。
完全可以在Bootstrap中进行微小的调整，还是必须使用单独的文件进行布局？
答
试试下面的代码
<!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>
答
这可能是一个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>我希望这将是有益的。
获得此结果的最快方法是使用CSS单独文件进行布局。这将更容易更新和更清洁。 –