bootstrap 网格系统和固定侧边栏

Question

我正在尝试创建包含两个主要部分的 bootstrap 网格页面。一个是应用程序内容，另一个是侧边导航栏。导航栏比应用程序内容本身短得多。我想要完成的是，每当我滚动页面时，应用程序侧导航蝙蝠将始终粘在页面顶部（顶部，而不是底部）

我的代码：

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>

    <div class="col-sm-4 col-md-4">
      <app-side-navbar></app-side-navbar>
    </div>

  </div>
</div>

每当我滚动页面时，我总是希望在右上角看到应用程序导航栏。

谢谢！

Answer 1

尝试使用 fixed

 <div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8">
      <app-content></app-content>
    </div>
    <div class="nav-sticky">
      <div class="col-sm-4 col-md-4">
        <app-side-navbar></app-side-navbar>
      </div>
   </div>
</div>

在 css:

.nav-sticky{
  position: fixed;
  top: 0;
  height: 100%;
  overflow:hidden;
}

Answer 2

您可以尝试仅将 overflow: auto 用于内容包装器

<div class="row">
  <div class="col-sm-10 col-md-10">

    <div class="col-sm-8 col-md-8 content">
      <div class='col-md-12 wrapper'>
        Content
      </div>
    </div>

    <div class="col-sm-4 col-md-4">
      Sidebar
    </div>
  </div>
</div>

.content {
  max-height: 100vh;
  overflow: auto;
}
.wrapper {
  height: 800px;
}

让我知道更多详情

Answer 3

将此属性添加到您的应用容器

min-height:100vh;
max-height:100vh;
overflow:scroll;

给你的 row position:fixed。也将 header 添加到我的样本中。

.app {
  min-height: 100vh;
  max-height: 100vh;
  overflow: auto;
  background: red;
  color: white;
}

.row {
  position: fixed;
  width: 100%;
}

.header {
  height: 50px;
  background: blue;
  color: white;
}

.navigator {}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12 header">HEADER</div>
    <div class="col-sm-10">

      <div class="col-sm-8 app">
        APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/> APP CONTENT
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>APP CONTENT
      </div>

      <div class="col-sm-4 navigator">
        NAVBAR
      </div>

    </div>
  </div>
</div>

Answer 4

这就是为我解决问题的原因：

<div class="row">

  <div class="app-wrapper">
    <div class="col-sm-10 col-md-10">
      <div class="col-sm-8 col-md-8">
        <app-content></app-content>
      </div>

      <div class="sticky">
        <div class="col-sm-4 col-md-4">
          <app-side-navbar></app-side-navbar>
        </div>
      </div>
    </div>

  </div>
</div>

和css：

.sticky {
  position: sticky;
  top:0;
  z-index: 999;
}

bootstrap 网格系统和固定侧边栏

bootstrap grid system and fixed sidebar

css

grid-system

twitter-bootstrap-3