使用bootstrap 4 css在左侧显示固定列，在右侧显示可滚动的其他列

hfsqlsce 于 2022-12-08 发布在 Bootstrap

关注(0)|答案(1)|浏览(244)

我有一个引导行，里面有2列。我需要1列在左边，应该是粘滞的。右边的列，我有多个卡片呈现在那里，其中包含文本，这些卡片应该是可滚动的。

看到图像，像文章和帖子的卡应该固定在该位置，但在右边的帖子应该是可滚动的。
我写的代码是这样的，

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

我该怎么做？

twitter-bootstrap

来源：https://stackoverflow.com/questions/73438177/displaying-a-col-fixed-on-left-and-the-other-col-on-the-right-scrollable-using-b

1条答案

按热度按时间

798qvoo81#

如果使用bootstrap 5，则bootstrap默认提供相同的类，即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>

如果你想固定位置，然后用固定顶部替换类，但你必须在使用固定位置时寻找对齐，有关位置类的更多信息，请参阅官方 Bootstrap 5文档。https://getbootstrap.com/docs/5.2/helpers/position/
希望对你有用：）

赞(0）回复(0）举报 2022-12-08

我来回答

使用bootstrap 4 css在左侧显示固定列，在右侧显示可滚动的其他列

1条答案

相关问题

热门标签

最新问答