css - Bootstrap 4 列布局对齐问题 - 嵌套列换行

Question

我在 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]

Answer 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可用于调整各个列的填充，这是另一个可能适合您的选项。