如何让ASP.NET Web Forms中两个下拉列表同行显示并留间距

问题根源 #

当前代码中两个下拉列表所在的col-md-4列间距不足，且下拉框设置了固定Width="200px"，容易超出列宽导致元素挤压，最终出现间距过近的情况。

解决方案1：使用Bootstrap原生form-inline布局（推荐） #

利用Bootstrap的form-inline类自动实现表单元素横向排列并添加默认间距，无需自定义CSS：

<%@ 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 type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <form id="form1" runat="server">
        <div style="max-width: 600px;">
            <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
            <!-- 使用form-inline实现横向带间距的表单布局 -->
            <div class="form-inline">
                <div class="form-group">
                    <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer" CssClass="control-label"></asp:Label>
                    <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack="True" Width="200px" Height="32px">
                    </asp:DropDownList>
                </div>
                <div class="form-group">
                    <asp:Label ID="lblBranch" runat="server" Text="Branch" CssClass="control-label"></asp:Label>
                    <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack="True" Width="200px" Height="32px">
                    </asp:DropDownList>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

解决方案2：自定义列间距CSS #

如果需要更灵活的间距控制，可以给列添加自定义样式：

<%@ 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
        }
        /* 自定义列间距，可调整margin-right值控制间距大小 */
        .form-item-col {
            margin-right: 30px;
        }
        /* 最后一列移除右边距，避免多余空白 */
        .form-item-col:last-child {
            margin-right: 0;
        }
        /* 让下拉框自适应列宽，避免超出挤压 */
        .form-control {
            width: 100% !important;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
    <link rel="stylesheet" href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css' media="screen" />
    <form id="form1" runat="server">
        <div style="max-width: 600px;">
            <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
            <div class="row">
                <div class='col-md-4 form-item-col'>
                    <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
                    <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack="True" Height="32px">
                    </asp:DropDownList>
                </div>
                <div class='col-md-4 form-item-col'>
                    <asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label>
                    <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack="True" Height="32px">
                    </asp:DropDownList>
                </div>
            </div>
        </div>
    </form>
</body>
</html>

关键调整说明 #

1. 移除固定宽度限制：方案2中去掉下拉框的Width="200px"，改用width:100%让元素自适应列宽，避免超出布局范围。
2. 控制容器宽度：将外层容器max-width从400px调整为600px，给两个表单元素足够的展示空间。
3. 利用Bootstrap原生类：方案1的form-inline和form-group是Bootstrap专为横向表单设计的类，能自动处理元素间距和对齐。

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