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

Answer 2

<div class="container">
<div class="row">
    <div class="col-sm-3">
        <ul class="list-inline">
            <li class="list-inline-item">
                <label class="col-form-label custom-label" for="idNo">Lable Name</label>
            </li>
           <li class="list-inline-item">
                <label class="col-form-label">:</label>
            </li>
           <li class="list-inline-item">
                <label class="col-form-label">Label Value</label>
            </li>
        </ul>
    </div>
    <div class="col-sm-9"></div>
</div>

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

2 个答案: