Bootstrap嵌套列超出col-lg-4父列范围问题求助

嘿，这是Bootstrap网格系统的典型新手问题，我来给你拆解清楚～

核心问题：违反了Bootstrap网格的两个关键规则 #

Bootstrap的12列网格系统有严格的层级要求，你的代码刚好踩了两个坑：

1. 所有col-*列必须放在.row容器内：.row会提供负边距来抵消父容器的内边距，同时确保列的布局计算正确。你直接在col-lg-4里嵌套col-*元素，没有用.row包裹，导致边距和宽度计算混乱。
2. 嵌套列的总宽度（偏移+列宽）不能超过12：你用了col-lg-offset-3 col-lg-11，偏移3列+列宽11列，总和是14，远远超过了12列的限制，这必然会让元素超出父列的范围。

另外，表单里的按钮容器col-lg-offset-5也没有放在.row里，同样会导致布局偏移异常。

修正后的代码 #

我帮你调整了结构，严格遵循Bootstrap的网格规则：

@section('body') 
<div class="container"> 
  <div class="row"> 
    <br> 
    <div class="col-lg-4 col-lg-offset-4">
      <!-- 第一层嵌套：用.row包裹列 -->
      <div class="row">
        <div class="col-lg-10">
          <h3>Edit Record</h3>
        </div>
        <div class="col-lg-2 text-right">
          <button class="btn btn-info">Back</button>
        </div>
      </div>

      <!-- 表单区域：同样用.row包裹 -->
      <div class="row">
        <div class="col-lg-12">
          <form class="well">
            <input type="text" name="title" class="form-control" value="{{$rec->title}}"><br>
            <input type="text" name="title" class="form-control" value="{{$rec->body}}"><br>
            <!-- 按钮区域也要用.row包裹 -->
            <div class="row">
              <div class="col-lg-offset-5 col-lg-2">
                <button class="btn btn-info">Submit</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div> 
  </div> 
</div> 
@endsection

关键修改说明 #

• 给所有嵌套的col-*元素都加上了.row父容器，确保布局计算正确。
• 调整了标题和返回按钮的列宽度为col-lg-10+col-lg-2，总和12，刚好填满父列的宽度。
• 表单内的按钮区域也用.row包裹，同时给按钮列加上了col-lg-2（避免按钮撑满整行），偏移和列宽总和不超过12。

这样修改后，你的元素就会乖乖待在col-lg-4 col-lg-offset-4的父列范围内啦～

内容的提问来源于stack exchange，提问作者Don'tDownvoteMe