如何在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

我不确定你是否只是想要一个固定侧面的布局,或者侧面要固定直到它到达页脚(如Trulia).

这是一个简单的布局,左侧固定(Split 50 50).

body, html {
    height: 100%;
}

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

https://www.codeply.com/go/IuOp3nvCpy

要使侧面仅在特定点固定(或粘性),position:sticky在所有浏览器中都不能很好地工作.我将使用插件或polyfill,如下所述:如何使用CSS位置粘贴以使用Bootstrap 4保持侧边栏可见

更新Bootstrap 4.0.0

现在不需要额外的css fixed-top,并且position:fixed可以在左侧列上使用该类.

相关:
右侧固定col
如何使用Bootstrap 4创建固定侧栏布局？