如何调整Bootstrap ASP.NET表单布局，让控件显示在标签上方？

嗨，我来帮你搞定这个布局调整的问题！你现在用的是Bootstrap的form-group类，默认是标签在上、控件在下的排版，要改成控件在上、标签在下其实很简单，只需要两个小调整：

核心调整步骤 #

1. 调换控件与标签的顺序：把每个form-group里的ASP.NET控件（DropDownList/TextBox）移到<label>标签的前面，这是实现上下颠倒的核心。
2. 添加间距优化样式：给<label>标签加上mt-2类（Bootstrap的margin-top辅助类），让标签和上方的控件之间保持合适的间距，避免视觉上过于拥挤。

修改后的完整代码 #

<form id="Data" runat="server" class="p-3 mb-2 bg-primary text-dark">
    <div class="form-group col">
        <asp:DropDownList name="Countries" ID="Countries" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
            <asp:ListItem Text="<Seleccione país>" Value="0" />
        </asp:DropDownList>
        <label for="Countries" class="control-label mt-2">Email address</label>
    </div>
    <div class="form-group col">
        <asp:Textbox runat="server" TextMode="Date" name="DateIn" ID="DateIn" Text="Seleccione Fecha Devolucion">
        </asp:Textbox>
        <label for="DateIn" class="control-label mt-2">Email address</label>
    </div>
    <div class="form-group col">
        <asp:Textbox runat="server" TextMode="Date" name="DateOut" ID="DateOut" Text="Seleccione Fecha Retiro">
        </asp:Textbox>
        <label for="DateOut" class="control-label mt-2">Email address</label>
    </div>
    <div class="form-group col">
        <asp:DropDownList name="smth" ID="smth" runat="server" AppendDataBoundItems="true" OnSelectedIndexChanged="Countries_Selected">
            <asp:ListItem Text="<Seleccione país>" Value="0" />
        </asp:DropDownList>
        <label for="smth" class="control-label mt-2">Email address</label>
    </div>
</form>

额外说明 #

• 注意要保持<label>的for属性和对应控件的ID完全一致，这样既能保证表单的可访问性（屏幕阅读器能正确关联标签和控件），也不影响原有功能。
• 如果觉得间距不够或者太大，可以调整mt-2为mt-1（更小间距）或mt-3（更大间距），Bootstrap的间距类可以灵活调整。

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