如何避免设置float:right的div占满空间 解决Bootstrap5侧边栏被挤压问题

问题根因 #

• 布局结构错误：内容区域被单独包裹在.container容器内，侧边栏在该容器外部，二者不属于同一个布局流，无法实现并排展示
• 盒模型计算溢出：你给内容区设置75%宽度、侧边栏设置20%宽度的同时，都添加了50px的内边距，默认盒模型下内边距会额外叠加在元素宽度上，二者总宽度超过父容器100%宽度，导致侧边栏被挤到下方
• 冗余的float布局：既然使用了Bootstrap v5，完全可以使用框架自带的栅格系统实现布局，不需要手动写float逻辑，反而容易出现浮动高度塌陷等问题

修复方案 #

第一步：调整HTML结构 #

将内容区和侧边栏放到同一个.container下，使用Bootstrap栅格系统的row和col类控制布局，修改后代码如下：

<div class="container" style="margin-top: 80px;">
  <div class="row g-4">
    <!-- 内容区域 -->
    <div class="col-md-9">
      <div class="posts jumbotron">
        <div class="post">
          <h3 class="post-heading"><a href="#">Lorem</a></h3>
          <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
          <hr style="height: 3px; margin-top: 30px;">
          <br><br>
        </div>
        <div class="post">
          <h3 class="post-heading"><a href="#">Lorem</a></h3>
          <p class="post-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus maxime odio soluta eveniet, illum rem corporis minima velit quam voluptatibus earum quae quibusdam aut molestias? Consequuntur quibusdam odio culpa delectus!</p>
          <hr style="height: 3px; margin-top: 30px;">
          <br><br>
        </div>
      </div>
    </div>
    <!-- 侧边栏区域 -->
    <div class="col-md-3">
      <div class="sidebar jumbotron">
        <h3 class="brand">Joined subfredits</h3>
        <br><br>
        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a></p>
        <hr>
        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a></p>
        <hr>
        <p style="margin-top: 20px; margin-bottom: 20px;"><a href="#" class="sidebar-link">Some text</a></p>
        <hr>
      </div>
    </div>
  </div>
</div>

第二步：调整CSS样式 #

删除float相关属性，添加盒模型规则，修改后代码如下：

* {
  box-sizing: border-box;
}
.sidebar {
  padding: 50px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  border-radius: 10px;
}
.posts {
  border: 1px solid gray;
  padding: 50px;
}

修改后Bootstrap的栅格系统会自动适配不同屏幕尺寸，中小屏侧边栏会自动排列到内容下方，不需要额外写响应式逻辑。

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