如何添加下拉列表服务器并在同一行或行上下拉分支？

Question

我在 asp.net web forms 工作。我在设计页面打印服务器下拉列表和

分支下拉列表不显示在同一行或行上

所以如何通过引导程序或 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: 400px;">
         <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2>
         <div class="row">
             <div class='col-md-4'>
        <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label>
        <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control"  AutoPostBack = "True" Width="200px" Height="32px">
        </asp:DropDownList>
                 </div>
             <div class='col-md-4'>
        <asp:Label ID="lblBranch" runat="server" Text="Branch"></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>

预期结果

将两个下拉对齐在同一行

最后更新的帖子

两个下拉列表显示在我需要的同一行

但彼此非常封闭，所以如何留出空间

img 显示状态

Answer 1

您正在使用 Boostrap 版本 3.0.3，请尝试使用当前可用的最新版本 (5.2.3)，在这种情况下它可以正常工作！

最后更新的帖子
要在行之间留出空间，您可以使用引导程序类； 我删除了减少空间的最大宽度，现在它命令container class

 <%@ 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> <script type="text/javascript" src='https.//ajax.as.netcdn.com/ajax/jQuery/jquery-1.8.3.min:js'></script> <.--OLD STYLE --> <.--<link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0,3/css/bootstrap.min:css" media="screen" />--> <.--New style--> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5:2;3/dist/css/bootstrap:min:css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> </head> <body> <form id="form1" runat="server"> <div><:--style="max-width: 400px:" is no longer needed because it is handled by container (bootstrap)--> <h2 class="form-signin-heading">Reprint ADC JDE Reports</h2> <div class="container"> <div class="row"> <div class="col-6"> <p>Column 1</p> <select> <option value="value1">Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> </select> <asp:Label ID="lblPrintServer" runat="server" Text="PrintServer"></asp:Label> <asp:DropDownList ID="dropPrinters" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px"> </asp:DropDownList> </div> <div class="col-6"> <p>Column 2</p> <select> <option value="value1">Option 1</option> <option value="value2">Option 2</option> <option value="value3">Option 3</option> </select> <asp:Label ID="lblBranch" runat="server" Text="Branch"></asp:Label> <asp:DropDownList ID="dropBranches" runat="server" CssClass="form-control" AutoPostBack = "True" Width="200px" Height="32px"> </asp:DropDownList> </div> </div> <asp:Label ID="lblDate" runat="server" Text="Date"></asp:Label> <asp:TextBox ID="txtDate" runat="server" AutoPostBack = "True" TextMode="Date"></asp:TextBox> <asp:Label ID="Label3" runat="server" Text="FromTime"></asp:Label> <asp.TextBox ID="txtFromTime" runat="server" TextMode="Time" AutoPostBack = "True"></asp.TextBox> <asp.Label ID="lblToTime" runat="server" Text="ToTime" ></asp.Label> </div> </div> </form> </body> <.--OLD JS--> <.--<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>--> <!--New JS--> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script> </html>

或者您可以提前 go 并一次更换一个版本的引导程序并检查从哪个版本开始一切正常

如何添加下拉列表服务器并在同一行或行上下拉分支？

问题描述

1 个解决方案

解决方案1
0 已采纳 2023-01-30 22:17:20

如何添加下拉列表服务器并在同一行或行上下拉分支？

问题描述

1 个解决方案

解决方案1 0 已采纳 2023-01-30 22:17:20

解决方案1
0 已采纳 2023-01-30 22:17:20