Bootstrap面板内容底部溢出问题求助

问题根源是你没有用.row正确包裹栅格列，导致浮动的列无法形成独立行块，长内容列撑开高度后，下方列会向上填充空白区域，造成视觉上的溢出重叠。

修复方案 #

• 将每一组左右两个.col-sm-6包裹在.row容器内，让每行的列形成独立区块，自动适配高度，避免下方元素错位。
• 无需额外添加word-wrap:break-word;，Bootstrap静态表单控件默认支持自动换行。

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
  <h2>Panel Test</h2>
  <div class="panel panel-default">
    <div class="panel-heading">Panel Heading</div>
    <div class="panel-body">
      <!-- 第一行：姓名 + 地址 -->
      <div class="row form-group-sm">
        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Name</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">Abu</p>
          </div>
        </div>

        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Address</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as</p>
          </div>
        </div>
      </div>

      <!-- 第二行：邮箱 + 年龄 -->
      <div class="row form-group-sm">
        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Email</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">abu@yahoo.com</p>
          </div>
        </div>

        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Age</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">19</p>
          </div>
        </div>
      </div>

      <!-- 第三行：手机 + 家庭电话 -->
      <div class="row form-group-sm">
        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Phone (M)</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">033172218</p>
          </div>
        </div>

        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Phone (H)</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">4123421</p>
          </div>
        </div>
      </div>

      <!-- 第四行：分支 -->
      <div class="row form-group-sm">
        <div class="col-sm-6">
          <label class="col-sm-4 form-control-static control-label">Branch</label>
          <div class="col-sm-8 form-control-static">
            <p class="text-primary">Remote</p>
          </div>
        </div>
      </div>
    </div>
    <div class="panel-footer">Panel Footer</div>
  </div>
</div>

原理说明 #

Bootstrap栅格系统依赖.row清除内部列的浮动并管理间距，每个.row会将内部列限制在同一行。当某列内容变长时，整个.row高度会自动撑开，下方.row会自然排列在其下方，彻底解决内容溢出重叠问题。

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