Css 引导4列布局对齐问题-嵌套列换行

我已经在Bootstrap4中编写了下面的列布局。它没有正确对齐。最后一个嵌套列将换行到新行

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

标签名称
:
标签值
[在此处输入图像描述][1]

col-sm-3中的宽度不足，无法容纳3列的内容和填充，因此列无法缠绕（垂直堆叠）。为了防止出现这种情况，可以调整行内列的填充。Bootstrap 4有一个用于此目的的

无排水沟
类

<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>


标签名称
:
标签值


Bootstrap 4还具有可用于调整单个列上的填充的功能，这是另一个可能适合您的选项。

<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>



标签名称


:


标签值



将第一列设为9，另一列设为3。但我的要求是先设3，然后设9