Cách để cột cố định và cuộn phải trong Bootstrap 4, đáp ứng?

Question

Tôi đang sử dụng Angular 4, Bootstrap 4 và cố gắng triển khai div cố định có thể cuộn và div cố định bên trái. Nó rất giống với những gì Trulia có.

Bootstrap thả plugin Affix jQuery trong phiên bản 4 để phương pháp này không hợp lệ nữa, họ khuyên bạn nên sử dụng vị trí: dính, nhưng tôi không thể làm cho nó hoạt động.

Vui lòng trợ giúp!

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

Tôi không chắc chắn nếu bạn chỉ đơn giản là muốn có một bố trí với 1 bên cố định, hoặc cho một bên để được cố định cho đến khi nó đạt đến chân trang (như Trulia).

Đây là bố cục đơn giản với mặt trái cố định (Tách 50 50).

body, html { 
    height: 100%; 
} 

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

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

Để làm cho phía bên cố định (hoặc dính) duy nhất tại một thời điểm cụ thể, position:sticky không hoạt động rất tốt trên tất cả các trình duyệt. Tôi muốn sử dụng một plugin hoặc polyfill như đã giải thích ở đây: How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

---

tương tự với fixed col on right side