Bootstrap 单页应用程序布局答案

【问题标题】：Bootstrap single page application layout [closed]Bootstrap 单页应用程序布局
【发布时间】：2017-05-19 16:10:31
【问题描述】：

如何在Bootstrap中实现像附加图片一样的单页应用布局？

注意：只有容器会在任何操作中替换。

【问题讨论】：

标签： html css twitter-bootstrap single-page-application

【解决方案1】：

这可能会对您有所帮助！我不想让你气馁，所以回答这个问题。 但请确保您下次阅读https://stackoverflow.com/help/how-to-ask

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
<style>
// styles here 
body, html{
  height:100%;
}
.red{
  background: red;
}
.theheader{
  height: 50px;
}
.thecontainer{
  height:100%;
}
.h100{
  height: calc(100% - 50px);
}
.leftbar{
  background: green;
  height:100%;
}
.rightbar{
  background: blue;
  height:100%;
}</style>
  </head>
  <body>
    <div class="container-fluid thecontainer">
    <div class="row red theheader">
      <div class="col-md-12">
        Header here 
      </div>
      </div>

    <div class="row h100">
      <div class="col-md-3 leftbar">
        left side
      </div>
        <div class="col-md-9 rightbar">
          left side
      </div>
      </div>
    </div>

  </body>
</html>

【讨论】：

是的，当然！谢谢