Asp.Net自舉類論的<asp：DropDownList的

<!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>

Asp.Net自舉類論的<asp：DropDownList的

而結果 - 下拉仍比上面和下面的文本框寬。

請查看呈現爲下面的截圖。爲什麼dropdownlist佔據整個屏幕寬度，而另外兩個控件卻沒有？網絡開發很新穎。請諮詢和幫助。非常感謝。艾耶

<%@ 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>

來源

2016-10-03 K Y Iyer

因爲您已經給出'width：100％'從thr drownownlist – Webruster

由於Webruster說，已指定100％的寬度。但是，這不是完整的故事。即使沒有這個，Bootstrap默認會定義一個100％的CSS寬度。嘗試將整個塊包裝在<div class="col-***">標籤中以更好地控制尺寸。例如，col-sm-3。

有關如何控制表單大小，請參閱Bootstrap documentation。

編輯： 與OP一會兒聊天后，人們得知，這個問題是與同時創建新的Web窗體應用程序時，由Visual Studio自動生成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; 
}

這覆蓋了默認的Bootstrap行爲。此外，沒有（據我所知）輸入類型稱爲select。 Asp.net下拉列表呈現爲正常的select標籤。所以上面的樣式是限制幾個input標籤的最大寬度，而不會影響下拉列表。

有兩種解決方案。首先，我們可以完全刪除這個塊。就表單元素而言，這將允許Bootstrap按預期行事。這將是我的首選。

二，用select代替input[type="select"]。如果發現我對輸入類型的知識不足，則在它後面添加「, select」，而不是替換它（不要忘記逗號！）

來源

2016-10-03 12:33:57

謝謝 - 最初做了這件事，但這並沒有幫助，嘗試過 - 沒有100％的寬度 - 讓我改變併發回。 –

如果您遇到了麻煩，您可能需要創建另一個外層''，在小屏幕尺寸和更高尺寸的情況下，將佔用父行寬度的3/12（1/4）（除非較大的尺寸也是指定）。 –

即使這沒有幫助。 –

Asp.Net自舉類論的<asp：DropDownList的

回答

相關問題