如何正确对齐ASP.NET复选框与标签？解决标签重叠问题

方法1：调整Bootstrap列宽度 #

原代码使用固定宽度的col-md-2，当标签文本（如DEL SCH）长度超出列宽时会溢出重叠。可以改用自适应宽度的列类，让容器根据内容自动调整：

<div class="col-md-auto radioContainer">
    <span style="white-space: nowrap;">
        <label class="lblScheduled" id="lblScheduled" runat="server">
            <asp:CheckBox ID="crudisScheduled" runat="server" TextAlign="Left" Text="<abbr title='Scheduled'>DEL SCH</abbr>" />
        </label>
    </span>
</div>

若需保持布局规整，可针对长文本所在列调整宽度（如改为col-md-3），确保所有列总宽度不超过12格（Bootstrap网格系统的总列数）。

方法2：给容器添加最小宽度与内边距 #

通过CSS为radioContainer类设置最小宽度和内边距，避免内容挤压溢出：

.radioContainer {
    min-width: 85px; /* 根据实际文本长度调整 */
    padding: 0 10px;
}

也可直接在包裹复选框的span上补充样式：

<span style="white-space: nowrap; display: inline-block; min-width: 75px;">
    <!-- 内部label与CheckBox内容 -->
</span>

方法3：优化复选框与文本的结构 #

拆分ASP.NET CheckBox的文本与控件，手动用label关联，更灵活控制间距：

<label class="lblScheduled" id="lblScheduled" runat="server">
    <asp:CheckBox ID="crudisScheduled" runat="server" />
    <abbr title='Scheduled' style="margin-left: 4px;">DEL SCH</abbr>
</label>

这种方式能精准控制复选框与文本的间距，避免自动渲染的结构导致布局冲突。

方法4：允许文本换行（可选） #

若业务允许标签文本换行，可移除white-space: nowrap样式，让过长文本自动换行：

<span>
    <label class="lblScheduled" id="lblScheduled" runat="server">
        <asp:CheckBox ID="crudisScheduled" runat="server" TextAlign="Left" Text="<abbr title='Scheduled'>DEL SCH</abbr>" />
    </label>
</span>

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