我在 Bootstrap 4 中写了下面的列布局。它没有正确对齐。最后一个嵌套列换行。
<div class="row">
<div class="col-sm-3">
<div class="row">
<div class="col-sm-4">
<label class="col-form-label custom-label" for="idNo">Lable Name</label>
</div>
<div class="col-sm-1">
<label class="col-form-label">:</label>
</div>
<div class="col-sm-7">
<label class="col-form-label">Label Value</label>
</div>
</div>
</div>
<div class="col-sm-9"></div>
</div>[enter image description here][1]
最佳答案
col-sm-3
中的宽度不足以容纳 3 列的内容和填充,因此列会换行(垂直堆叠)。为防止这种情况,您可以调整行内列的填充。为此,Bootstrap 4 有一个 no-gutters
类...
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="row no-gutters">
<div class="col-sm-4">
<label class="col-form-label custom-label" for="idNo">Lable Name</label>
</div>
<div class="col-sm-1">
<label class="col-form-label">:</label>
</div>
<div class="col-sm-7">
<label class="col-form-label">Label Value</label>
</div>
</div>
</div>
<div class="col-sm-9"></div>
</div>
</div>
https://www.codeply.com/go/WBZZpqvuvC
Bootstrap 4 也有 padding utility classes classes可用于调整各个列的填充,这是另一个可能适合您的选项。
关于css - Bootstrap 4 列布局对齐问题 - 嵌套列换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50095052/