如何在ASP.NET Web Forms中为OrderType下拉框与Search按钮加间距？

针对你遇到的OrderType下拉框和Search按钮间距过近的问题，可通过以下几种方式解决：

1. 修复嵌套布局问题 #

你的代码中，OrderType所在的<div class="row">嵌套在了时间选择的row内部，导致它和下方按钮row的布局层级混乱，无法产生正常间距。需要将OrderType的row移到外层，与其他row同级。

2. 使用Bootstrap内置间距类 #

Bootstrap提供了一系列margin/padding工具类，可快速添加间距：

• 给OrderType的row添加mb-3（底部外边距），或者给按钮的row添加mt-3（顶部外边距），数值3对应间距大小，可根据需要调整为1到5。

3. 自定义CSS样式 #

如果需要更个性化的间距，可添加自定义CSS：

/* 给OrderType下拉框所在容器加底部间距 */
.order-type-container {
    margin-bottom: 15px; /* 自定义间距大小 */
}

然后给OrderType的div添加该类：

<div class="col-4 order-type-container">
    <asp:Label ID="lblOrderType" runat="server" Text="OrderType"></asp:Label>
    <asp:DropDownList ID="dropOrderType" runat="server" CssClass="form-control" Width="200px" Height="32px"></asp:DropDownList>
</div>

完整修改后的代码示例 #

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="TestPage.TestPage" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {
            padding: 20px
        }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css' media="screen" />
    <form id="form1" runat="server">
        <div style="max-width: 400px;">
            <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>

            <div class="row mb-3">
                <div class="col-7">
                    <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
                    <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="220px" Height="32px"></asp:DropDownList>
                </div>
                <div class="col-5">
                    <asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
                    <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="220px" Height="32px"></asp:DropDownList>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-4">
                    <asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label>
                    <asp:TextBox ID="txtDate" runat="server" CssClass="form-control" AutoPostBack = "True" TextMode="Date" Width="120px" Height="32px"></asp:TextBox>
                </div>
                <div class="col-4">
                    <asp:Label ID="Label3" runat="server" Text="FromTime"></asp:Label>
                    <asp:TextBox ID="txtFromTime" runat="server" CssClass="form-control" TextMode="Time" AutoPostBack = "True" Width="100px" Height="32px"></asp:TextBox>
                </div>
                <div class="col-4">
                    <asp:Label ID="lblToTime" runat="server" Text="ToTime" ></asp:Label>
                    <asp:DropDownList ID="drpMinutes" AppendDataBoundItems="true" runat="server" CssClass="form-control" AutoPostBack = "True" Width="170px" Height="32px" >
                        <asp:ListItem Text="--Select To Time " Value="0" />
                        <asp:ListItem Text="10" Value="10" />
                        <asp:ListItem Text="20" Value="20" />
                        <asp:ListItem Text="30" Value="30" />
                        <asp:ListItem Text="40" Value="40" />
                        <asp:ListItem Text="50" Value="50" />
                        <asp:ListItem Text="60" Value="60" />
                        <asp:ListItem Text="70" Value="70" />
                        <asp:ListItem Text="80" Value="80" />
                        <asp:ListItem Text="90" Value="90" />
                        <asp:ListItem Text="100" Value="100" />
                        <asp:ListItem Text="110" Value="110" />
                        <asp:ListItem Text="120" Value="120" />
                    </asp:DropDownList>
                </div>
            </div>

            <div class="row mb-3">
                <div class="col-4">
                    <asp:Label ID="lblOrderType" runat="server" Text="OrderType"></asp:Label>
                    <asp:DropDownList ID="dropOrderType" runat="server" CssClass="form-control" Width="200px" Height="32px"></asp:DropDownList>
                </div>
            </div>

            <div class="row">
                <div class="col-5">
                    <asp:Button ID="btnSearch" runat="server" Text="Search" class="btn btn-primary" CssClass="form-control" Width="150px" Height="32px"  />
                </div>
                <div class="col-7">
                    <asp:Button ID="btnPrint" runat="server" Text="Print" class="btn btn-primary" CssClass="form-control" Width="150px" Height="32px"  />
                </div>
            </div>
        </div>
    </form>
</body>
</html>

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