使用引导程序 4 css 显示固定在左侧的列和右侧可滚动的另一列

Question

I have a bootstrap row where I have 2 cols inside it. I need 1 col to be on the left side which should be sticky. The col on the right side, I have multiple cards rendered there which contain text and those cards should be scrollable.

See the image, The cards like Article and Post should be fixed to that position, but the posts on the right should be scrollable.

The code I have written is this,

<div class="container-fluid">
  <div class="row">

    // Row 1 should be on the left
    <div class="col-md-3">
      <app-articles></app-articles>
      <app-navigation></app-navigation>
    </div>


    // Row 2 should be on the right
    <div class="col-md-9">
      <div class="card" *ngFor="let post of posts; let i = index"></div>
    </div>

  </div>
</div>

How do I do this?

Answer 1

If you are using bootstrap 5 then bootstrap by default provide class for same ie sticky-top

 <div class="container-fluid">
    <div class="row">
     // Row 1 should be on the left
      <div class="col-md-3">
        <div class="sticky-top">
          <app-articles></app-articles>
          <app-navigation></app-navigation>
        </div>
      </div>

    // Row 2 should be on the right
    <div class="col-md-9">
      <div class="card" *ngFor="let post of posts; let i = index"></div>
    </div>
  </div>
</div>

And if you want to fixed position then replaced the class with fixed-top, but you have to look for alignment while using position fixed, for more information regarding to position classes then refer to the official bootstrap 5 documentations. https://getbootstrap.com/docs/5.2/helpers/position/

Hope that work for you:)