<asp:DropDownList 上的 Asp.Net 引导类答案

【问题标题】：Asp.Net Bootstrap Classes On <asp:DropDownList<asp:DropDownList 上的 Asp.Net 引导类
【发布时间】：2017-02-11 08:24:12
【问题描述】：

<!DOCTYPE html>

<html lang="en">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
Account Group - Add - My ASP.NET Application
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
    <form method="post" action="./groupAdd" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"    value="tRJn2Kjwvz2Puav8tcpz3Ls6wGBUmb5Ja174Y3bdllDemDMYow1wPnjeUZgjA1y+av/mqygIOqBBxlrkr1A6axhfG/Ic4fMYi6poCOfltc5MR88HYxVigJJBG3tIvHfroT0iXc0csFM0mwyzWlNttzAhjZx7Xogq99vurKroKnK4q23wfM8J72YgScmhpcujEBgtDuKzbt8o6nu6VjwNYg==" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
       theForm.submit();
    }
}
//]]>
</script>



<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-  PDU01" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl08', 'ctl01', [], [],    [], 90, 'ctl00');
//]]>
</script>


    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="./" class="navbar-brand">Application name</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a href="./">Home</a></li>
                    <li><a href="About">About</a></li>
                    <li><a href="Contact">Contact</a></li>
                </ul>

                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="Account/Register">Register</a></li>
                            <li><a href="Account/Login">Log in</a></li>
                        </ul>

            </div>
        </div>
    </div>
    <div class="container body-content">

<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_eGroupCode" id="MainContent_lGroupCode">Group Code</label>
            <input name="ctl00$MainContent$eGroupCode" type="text" maxlength="10" id="MainContent_eGroupCode" class="form-control" style="text-transform:uppercase" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_ddGroupType" id="MainContent_lGroupType">Group Type</label>
            <select name="ctl00$MainContent$ddGroupType" id="MainContent_ddGroupType" class="form-control">
<option value="IN">Incomes</option>
<option value="EX">Expenses</option>
<option value="AS">Assets</option>
<option value="LI">Liabilities</option>

</select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="MainContent_eGroupName" id="MainContent_lGroupName">Group Name</label>
            <input name="ctl00$MainContent$eGroupName" type="text" maxlength="40" id="MainContent_eGroupName" class="form-control" style="text-transform:uppercase" />
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <input type="submit" name="ctl00$MainContent$bSave" value="Save" id="MainContent_bSave" class="btn btn-success" />
    </div>
</div>

        <hr />
        <footer>
            <p>&copy; 2016 - PFA</p>
        </footer>
    </div>

<div class="aspNetHidden">

<input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="3AAE92F6" />
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="qSAzVSuS/WkdQ0+7cpffhRi71ZlGYos9x6mRfTlJETXx5PzLHrvJMrvKTBR+gk0eqMw6L0G8IaFchRCu2+y5qUSvQESXisN7B0rrXdNd3EB6D+zzcccmRVsiGszQD39higpryIq2R7q+im2eg0bLsdGa55i5eD7cOF8/Kh9ZNlMhO8NUTJ05Ef8LDMxYv+jB89mlh5Un6dkvjksggF8mBZp2pDYrDoGaINzbFwJzC5Q65UIgChzA9VRKUUWFG/BU" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Firefox","requestId":"d3ed4f11e0994099a89d07a103267276"}
</script>
<script type="text/javascript" src="http://localhost:50950/1ed6bd9582884a84ad84c822a4bf5589/browserLink" async="async"></script>
<!--  End Browser Link -->

</body>
</html>



   Version 2
   <%@ Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
   <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
            <asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
            <asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control">
                <asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
                <asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
                <asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
                <asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
            </asp:DropDownList>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
            <asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
        </div>
    </div>
</div>

结果 - 下拉菜单仍然比上方和下方的文本框更宽。

请看下面的截图。为什么下拉列表占据整个屏幕宽度，而其他两个控件没有？对 Web 开发非常陌生。请建议和帮助。非常感谢。耶

<%@ Page Title="Account Group - Add" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="groupAdd.aspx.vb" Inherits="PFA.groupAdd" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
   <div class="form-group">
        <asp:Label runat="server" ID="lGroupCode" Text="Group Code" AssociatedControlID="eGroupCode"></asp:Label>
        <asp:TextBox runat="server" ID="eGroupCode" CssClass="form-control">    </asp:TextBox>
    </div>
    <div class="form-group">
        <asp:Label runat="server" ID="lGroupType" Text="Group Type" AssociatedControlID="ddGroupType"></asp:Label>
        <asp:DropDownList runat="server" ID="ddGroupType" CssClass="form-control" width="100%">
            <asp:ListItem Text="Incomes" Value="IN"></asp:ListItem>
            <asp:ListItem Text="Expenses" Value="EX"></asp:ListItem>
            <asp:ListItem Text="Assets" Value="AS"></asp:ListItem>
            <asp:ListItem Text="Liabilities" Value="LI"></asp:ListItem>
        </asp:DropDownList>
    </div>
    <div class="form-group">
        <asp:Label runat="server" ID="lGroupName" Text="Group Name" AssociatedControlID="eGroupName"></asp:Label>
        <asp:TextBox runat="server" ID="eGroupName" CssClass="form-control"></asp:TextBox>
    </div>

【问题讨论】：

因为你已经从下拉列表中给出了width:100%

标签： css asp.net twitter-bootstrap

【解决方案1】：

正如 Webruster 所说，您已指定 100% 的宽度。然而，这还不是全部。即使没有这个，Bootstrap 默认会定义 100% 的 CSS 宽度。尝试将整个块包装在 <div class="col-***"> 标记中以更好地控制大小。例如，col-sm-3。

请参阅Bootstrap documentation 了解如何控制表单大小。

编辑： 在与 OP 聊了一会儿之后，发现问题出在 Visual Studio 在创建新 Web 窗体应用程序时自动生成的 Content/Site.css 文件上。除其他外，它包含以下样式：

/* Set widths on the form inputs since otherwise they're 100% wide */ 
input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="select"]{ 
max-width: 280px; 
}

这会覆盖默认的引导行为。此外，没有（据我所知）称为select 的输入类型。 Asp.net 下拉列表呈现为正常的select 标签。所以上面的样式做的是限制几个input标签的最大宽度，而不影响下拉列表。

有两种解决方案。首先，我们可以简单地完全删除这个块。就表单元素而言，这将允许 Bootstrap 的行为符合预期。这将是我的偏好。

其次，将input[type="select"] 替换为简单的select。如果发现我缺乏对输入类型的了解，请在其后添加“, select”，而不是替换它（不要忘记逗号！）

【讨论】：

谢谢 - 最初是这样做的，但没有帮助，尝试了这个 - 也没有 100% 的宽度 - 让我更改并发布回来。
如果您遇到问题，您可能需要创建另一个外部<div class="row">，并将其嵌套在其中。列类代表特定屏幕尺寸下的 12 的一些划分。例如，<div class="row"><div class="form-group col-sm-3">....</div></div> 在小屏幕尺寸及以上（除非还指定更大尺寸）时将占用父行宽度的 3/12 (1/4)。
即使这样也无济于事。
如果我将 Width="100%" 添加到文本框，则没有变化。它们的大小不会改变。谢谢
会不会是asp.net？正在编辑我的问题并粘贴视图源