Bootstrap 4列布局对齐问题：嵌套列自动换行

这种嵌套列跑换行的情况我碰过好多次，大概率是外层列的空间不够容纳嵌套列的内容，或者没考虑到Bootstrap自带的间距（gutter）影响。咱们一步步来排查修复：

1. 先确认嵌套列的比例没问题 #

你嵌套的col-sm-4 + col-sm-1 + col-sm-7加起来刚好是12，这部分逻辑是对的。问题主要出在外层的col-sm-3——当屏幕处于sm断点（≥576px）时，这个列只占页面25%的宽度，这么窄的空间里，嵌套列很容易因为内容（比如label的文字）超过列的最小宽度，被挤得换行。

2. 修复方案一：给外层列扩容 #

如果你的布局允许，把外层的col-sm-3改成更宽的列，给嵌套内容足够的空间：

<div class="row">
  <div class="col-sm-6"> <!-- 把3改成6，空间直接翻倍 -->
    <div class="row">
      <div class="col-sm-4">
        <label class="col-form-label custom-label" for="idNo">Label 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 Content</label>
      </div>
    </div>
  </div>
</div>

3. 修复方案二：强制嵌套列不换行 #

如果必须保留外层col-sm-3，可以试试这两种方法：

• 把嵌套列的断点改成默认的xs级别（Bootstrap 4里xs是默认，直接写col-*），让小空间里也强制按比例排列：

<div class="row">
  <div class="col-sm-3">
    <div class="row">
      <div class="col-4"> <!-- 去掉sm，用全局断点 -->
        <label class="col-form-label custom-label" for="idNo">Label Name</label>
      </div>
      <div class="col-1">
        <label class="col-form-label">:</label>
      </div>
      <div class="col-7">
        <label class="col-form-label">Label Content</label>
      </div>
    </div>
  </div>
</div>

• 给嵌套的row加上flex-nowrap类，强制不换行（注意：可能会导致内容溢出，需要配合overflow-hidden这类样式处理）：

<div class="row">
  <div class="col-sm-3">
    <div class="row flex-nowrap"> <!-- 新增flex-nowrap类 -->
      <div class="col-sm-4">
        <label class="col-form-label custom-label" for="idNo">Label 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 Content</label>
      </div>
    </div>
  </div>
</div>

4. 额外小技巧：处理过长的文字内容 #

如果label的文字太长，即使列比例正确，也会把列撑宽导致换行。可以给label加上text-truncate类，让过长的文字自动截断显示：

<label class="col-form-label custom-label text-truncate" for="idNo">Super Long Label Name That Would Break The Layout</label>

内容的提问来源于stack exchange，提问作者Siva Kaliyamoorthy