Question

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

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

我的问题是正确的，因为在自举网格系统中，右侧块将被视为单行，而主要内容包含多个行。我怎么能这样做？

Answer 1

围绕整个Bootstrap网格（容器＆gt; row＆gt; 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

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

这样，右侧与主要内容分开。然后我可能会误解这个问题。

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

具有右侧固定侧边栏的Bootstrap响应式网格

3 个答案: