Bootstrap布局求助：如何让list-group居右固定、cards居左且布局正常

兄弟，我太懂你这种用float:right搞崩Bootstrap布局的痛苦了！Bootstrap 4的栅格系统是基于Flexbox实现的，直接用float会脱离文档流，彻底打乱它的布局逻辑，咱们换个符合Bootstrap规范的姿势来搞定这个需求：

核心思路 #

1. 用Bootstrap原生的栅格列划分空间，代替float实现左右布局
2. 用Bootstrap自带的sticky-top类实现菜单随滚动固定，无需自定义CSS/JS

完整代码示例 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container py-4">
  <div class="row">
    <!-- 左侧Cards区域，大屏幕占8列 -->
    <div class="col-lg-8 mb-4 mb-lg-0">
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">这里是Card 1的内容，多写点文字让页面能滚动起来...</p>
        </div>
      </div>
      <div class="card mb-3">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">这里是Card 2的内容，多写点文字让页面能滚动起来...</p>
        </div>
      </div>
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card 3</h5>
          <p class="card-text">这里是Card 3的内容，多写点文字让页面能滚动起来...</p>
          <p class="card-text">再加几行，确保滚动时能看到菜单固定的效果：</p>
          <p>测试文本测试文本测试文本测试文本测试文本</p>
          <p>测试文本测试文本测试文本测试文本测试文本</p>
          <p>测试文本测试文本测试文本测试文本测试文本</p>
          <p>测试文本测试文本测试文本测试文本测试文本</p>
        </div>
      </div>
    </div>

    <!-- 右侧固定菜单区域，大屏幕占4列 -->
    <div class="col-lg-4">
      <div class="list-group sticky-top">
        <a href="#" class="list-group-item list-group-item-action active">
          菜单选项1
        </a>
        <a href="#" class="list-group-item list-group-item-action">菜单选项2</a>
        <a href="#" class="list-group-item list-group-item-action">菜单选项3</a>
        <a href="#" class="list-group-item list-group-item-action">菜单选项4</a>
      </div>
    </div>
  </div>
</div>

关键细节解释 #

• 栅格列划分：用row包裹两个col-lg-8和col-lg-4，在大屏幕（≥992px）时自动左右排列，小屏幕会自动堆叠成上下布局，完美适配响应式
• 固定菜单：给list-group加上sticky-top类，这是Bootstrap 4原生提供的类，会在页面滚动到该元素位置时自动固定在视口顶部，不会破坏栅格布局
• 间距优化：用mb-4、mb-lg-0这些间距类，在小屏幕时给Cards区域底部留间距，大屏幕时取消，提升视觉体验

这样搞出来的布局既符合Bootstrap的规范，又不会出现布局崩溃的问题，而且响应式也自动搞定了！

内容的提问来源于stack exchange，提问作者Berisko