Bootstrap 3 中的 3 列全屏应用布局答案

【问题标题】：3-column full screen app layout in Bootstrap 3Bootstrap 3 中的 3 列全屏应用布局
【发布时间】：2017-02-14 21:05:14
【问题描述】：

我正在为一个应用创建一个管理仪表板，我需要这样的布局：

---------------------------------------------------------------------------------
|                                                                               |
|                              NAVBAR                                           |
---------------------------------------------------------------------------------
|        |                                                  |                   |
|   N    |                                                  |                   |
|   A    |                                                  |                   |
|   V    |                                                  |                   |
|   I    |                                                  |                   |
|   G    |                                                  |                   |
|   A    |                                                  |                   |
|   T    |                      MAIN VIEW                   |       SUB         |
|   I    |                                                  |       VIEW        |
|   O    |                                                  |                   |
|   N    |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
|        |                                                  |                   |
---------------------------------------------------------------------------------

宽度和高度应为整个视口的 100%。我尝试通过使用.navbar-fixed-top、position: absolute 修复顶部导航栏来实现侧导航，并使用针对不同屏幕尺寸的媒体查询来修复主视图和子视图的高度。但我正在寻找更好、更清洁的解决方案。我该怎么做？

【问题讨论】：

getbootstrap.com/examples/dashboard
@Morpheus 是的，我见过这个。但我需要的布局是固定布局，在主视图和子视图内滚动。
设置高度并自动添加溢出？
是的，但是我必须使用媒体查询更改不同屏幕的高度。我已经在这样做了。但我正在寻找更好的方法。

标签： html css twitter-bootstrap twitter-bootstrap-3 grid-layout

【解决方案1】：

这里有一个相当简单的方法来完成你想要的。假设您想要折叠 xs 视口，媒体查询允许导航、主视图和子视图的高度自动转到。

DEMO

CSS：

html, body {
   height: 100%; 
}
.container-fluid.content {
    padding-top: 50px;
    height: 100%;
}
.container-fluid.content>.row {
    height: 100%;
}    
.mainview, .navview, .subview {
    height: 100%;
    overflow: auto;        
}
.navview, .subview {
    background-color: #eee;        
}         

@media (max-width: 767px) {
    .mainview, .navview, .subview {
      height: auto;   
    }
}

基本 HTML 结构：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</div>
<div class="container-fluid content">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-sm-2 navview">
      <h2>Navigation</h2>
    </div>
    <div class="col-sm-7 mainview">
      <h2>Main View</h2>
    </div>
    <div class="col-sm-3 subview">
      <h2>Sub View</h2>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

我创建了一个名为 Leather 的 Rails gem，它有一些我添加到 Bootstrap 的组件，可以帮助您创建这个布局。如果您将 .navbar-static-top 添加到 http://leather.flyoverworks.com/layouts/three_column 的示例布局中，它应该会让您非常接近您所描述的内容。

【讨论】：