如何不使用float减少Bootstrap两个col列间距并解决溢出与横向滚动问题

AI 小北

2026-10-8

Bootstrap左右分栏布局问题修复方案

问题核心原因

手动给.layoutProb、container、col-sm-5设置固定像素宽度，破坏了Bootstrap栅格系统的响应式规则，是横向滚动条、缩小页面时内容溢出的直接诱因
未闭合table、thead、tr等HTML标签，存在语法错误
Bootstrap默认栅格槽宽（gutter）不符合需求，导致两列间距过大

修正后代码

HTML代码

<div class="layoutProb">
  <!-- 替换container为container-fluid实现全屏宽度，删除固定宽度样式 -->
  <div class="container-fluid">
    <!-- 用g-*类控制列间距，g-0就是无间距，可根据需求调整为g-1/g-2等 -->
    <div class="row g-0">
      <div class="col-sm-7">
        <!-- 加img-fluid类实现图片响应式，不会溢出容器 -->
        <img src="../assets/Img/Beer.jpg" alt="产品图" class="pic img-fluid"/>
      </div>
      <div class="col-sm-5">
        <table id="cart" class="table table-hover table-condensed">
          <thead>
            <tr>
              <th><h1> The first <br>Tshirt Here</h1></th>  
            </tr>
          </thead>
          <!-- 补全table剩余业务内容 -->
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

CSS代码

.layoutProb {
  top: 0px;
  left: 0px;
  /* 删除固定宽度，用最大宽度限制，适配不同屏幕 */
  max-width: 1920px;
  height: 1080px;
  /* 隐藏横向溢出，彻底消除横向滚动条 */
  overflow-x: hidden;
  margin: 0 auto; /* 容器水平居中 */
}