Bootstrap 如何实现左栏固定右滚动 4、响应式？

Question

我正在使用 Angular 4、Bootstrap 4 并尝试实现固定的可滚动右侧 div 和固定的左侧 div。它应该与 Trulia 非常相似。

Bootstrap 在版本 4 中删除了 Affix jQuery 插件，所以这个方法不再有效，他们建议使用 position: sticky，但我无法让它工作。

请帮忙！

index.html

<div class="container-fluid">
  <div class="row h-100">
    <div class="col-md-6">
      <div id="left-container">
        <div class="search-property">
          <input type="text">
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div id="right-container">
        <app-home-right></app-home-right>
      </div>
    </div>  
  </div>
</div>

style.css

#left-container {
  height: 100%;

  position: fixed;
  width: inherit; 
}

#right-container {
  position: absolute;
}

.search-property {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
  margin-left: 50%;
}

.nopadding {
   padding: 0 !important;
   margin: 0 !important;
}

.border {
  border: 1px solid black;
}

Answer 1

我不确定您是只想要具有 1 个固定边的布局，还是固定边直到它到达页脚（如 Trulia）。这是一个固定左侧的简单布局 (Split 50 50)。

body, html {
    height: 100%;
}

#left {
    position: fixed;
    top: 0;
    bottom: 0;
}

要使侧面仅在特定点固定（或粘性），position:sticky 并不是在所有浏览器上都能很好地工作。我会按照此处的说明使用插件或 polyfill：

https://codeply.com/go/IuOp3nvCpy

更新 Bootstrap 4.0.0 - fixed-top class 现在可以在 Bootstrap 中使用左侧栏删除 position:fixed.

所需的额外 css

更新 Bootstrap 4.1 - h-100 class 现在可用，它消除了额外的 CSS height:100%: https://codeply.com/go/ySC2l4xcEi

响应式 - 如评论中所述，媒体查询可用于使布局响应式：https://codeply.com/go/pqzJB4thBY

有关的：

Bootstrap col fixed position

Bootstrap 如何实现左栏固定右滚动 4、响应式？

How to left column fixed and right scrollable in Bootstrap 4, responsive?

twitter-bootstrap

sticky

bootstrap-4

twitter-bootstrap-4