问题描述
当列嵌套在另一列中时,页面布局会错位
<div class="container">
<div class="row">
<div class="col-6">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
<div class="col-6"></div>
</div>
</div>
解决方法
<div class="container">
<div class="row">
<div class="col-6">
<div class="row">
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
<div class="col-6">
<label>Name</label>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-6"></div>
</div>
</div>
高级方式:
<div class="container bg-primary" style="width: 800px; height: 100px; ">
<div class="row ml-1 h-100">
<div class="col-10 ml-0 my-auto h-75 container bg-danger">
<div class="row ml-1 h-100">
<div class="col-8 ml-0 my-auto h-75 container bg-warning">
<div class="row ml-1 h-100">
<div class="col-6 ml-0 my-auto h-75 container bg-success">
<div class="row ml-1 h-100">
<div class="col-4 ml-0 my-auto h-75 container bg-dark">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>