代码之家 › 专栏 › 技术社区 › Matt R

引导网格系统和固定边栏

grid-system twitter-bootstrap-3 css

Matt R · 技术社区 · 8 年前

我正在尝试创建包含两个主要部分的引导网格页面。一个是应用程序内容,另一个是侧导航栏。导航栏比应用程序内容本身短得多。我试图做到的是,每当我滚动页面时,应用程序侧导航键总是会贴在页面的顶部(顶部,而不是底部)

我的代码:

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

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

谢谢

4 回复 | 直到 8 年前

Matt R 8 年前

这就是我解决问题的原因:

<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;
}

Abin Thaha 8 年前

您可以尝试使用 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;
}

让我知道更多细节

××× × ×××× 8 年前

尝试使用 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;
}

Dhaval Jardosh 8 年前

将此属性添加到应用程序容器

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

给 position:fixed 到您的 row 。也为我的示例添加了标题。

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