带有右侧固定侧边栏的 Bootstrap 响应式网格答案

【问题标题】：Bootstrap responsive grid with right fixed sidebar带有右侧固定侧边栏的 Bootstrap 响应式网格
【发布时间】：2016-09-22 23:23:52
【问题描述】：

我想用这样的引导创建一个模板，它尊重网格的响应系统：

在图片中，导航栏和右侧（包含两个按钮）是粘性的（总是显示在视图上）

我的问题是右侧，因为在引导网格系统中，右侧块将被视为单行，而主要内容包含多行。我该怎么做？

【问题讨论】：

您希望侧边栏成为 12 列的一部分（1 或 2 列宽）还是 12 列应该与主要内容一样宽（它是否是网格的一部分）？ “右侧块将被视为单行”：嗯？您是说单列吗？
是的，我希望我的侧边栏成为网格的一部分（1 列宽）。

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

围绕整个 Bootstrap 网格（container>row>cols..）创建一个包装器，以包含固定的导航和右侧边栏。

<div class="wrapper">
        <!-- top nav -->
        <nav>
            ...
        </nav>

        <!-- main -->
        <div class="left" id="main">
            <div class="container-fluid">
                <h1>Bootstrap Grid...</h1>
            </div>
        </div>

        <!-- sidebar -->
        <div class="right" id="sidebar">
            Fixed right sidebar
        </div>
</div>

http://www.codeply.com/go/37bttGte6c

【讨论】：

我不知道在网格周围构建一个包装器而不是在网格中构建它是否有利于一个好的响应系统？
在外包装内包含网格并没有错。重要的是嵌套网格使用container-fluid > row > cols

【解决方案2】：

您可以将它们分离到各自的 <div> 容器中，例如：

<body>
    <div class="navbar navbar-default"> Navbar </div>

    <div class="main-content col-md-10"> Main Content </div>

    <div class="right-btn-group col-md-2"> Right buttons </div>
</body>

这样，右侧与主要内容分离。那么我可能又误解了这个问题。

【讨论】：

可以，但是用这个方法，右边的宽度就是col类的宽度，不能自定义这个宽度吧？
如果您想自定义列宽格式，我建议您查看this link，尤其是“自定义容器大小”部分。

【解决方案3】：

您正在寻找这样的东西吗？您可以根据需要调整右侧容器的宽度。无需编辑 bootstrap.css 或编写自定义引导类。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style>
    body{
      width: 100%;
      height: 100%;
      color: #fff;
    }
    header, footer{
      height: 100px;
    }
    header{
      width: 100%;
      background: #000;
    }
    .content-container{
      width: 100%;
      position: relative;
    }
    .left-container{
      width: calc(100% - 90px); /* adjust */
      height: 100%;
    }
    .right-container{
      width: 90px; /* adjust */
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      background: blue;
    }
    .main-content{
      height: 500px;
      background: #ff0000;
    }
    footer{
      width: 100%;
      background: #ed1899;
    }
  </style>
</head>
<body>
<div class="container-fluid">
  <div class="row">

    <header class="nav">nav bar</header>

    <div class="content-container">

      <div class="left-container">
        <div class="main-content">
          //main content
        </div>
        <footer>
          //footer content
        </footer>
      </div>

      <div class="right-container">buttons</div>

    </div>

  </div>
</div>
</body>
</html>

【讨论】：