在表单的第二行制作更大的文本框
Posted
技术标签:
【中文标题】在表单的第二行制作更大的文本框【英文标题】：making a bigger text box on a second row of the form 【发布时间】：2020-09-01 15:52:04 【问题描述】：我的表单上有两行文本框。第一行有三个文本框，下一行，我只想要一个宽度为 100% 的文本框。以下是我的代码：
<div class="row">
<div class="col-md-4">
<label>First Name</label><br />
<asp:TextBox runat="server" ID="fName" CssClass="textboxsizeLarge borderText" ></asp:TextBox></div>
<div class="col-md-4">
<label>Middle Name</label><br />
<asp:TextBox runat="server" ID="MdName" CssClass="textBoxSizMd borderText" ></asp:TextBox></div>
<div class="col-md-4">
<label>Last Name</label><br />
<asp:TextBox runat="server" ID="lname" CssClass="textboxsizeLarge borderText" ></asp:TextBox></div>
</div>
<div class="row">
<div class="col-md-12">
<label>Address1</label><br />
<asp:TextBox runat="server" ID="address1" CssClass="borderText textboxsizebig" ></asp:TextBox></div>
</div>
我希望 address1 文本框达到屏幕宽度的 80%，但它会达到 40%。为此，我正在使用 Bootstrap。
下面是第二个 address1 文本框的屏幕截图：
我希望 address1 一直到姓氏文本框的开头
下面是我的样式表：
.textboxsizeLarge
width:60%;
.textBoxSizMd
width: 30%;
.textboxsizebig
width: 100%;
.borderText
border: 1px solid black;
padding: 1px;
这就是我在我的 site.master 中使用引导程序的方式，以防引导程序无法正常工作。我不确定是否需要在我的 site.master 页面中添加任何其他内容。下面是部分 site.master 代码。之后我还粘贴了整个代码。
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="bootstrap" path="~/Scripts/bootstrap.js" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
下面是我的整个 sere.master 页面
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="IdentityCheckApp.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" type="text/css" media="all" href="Content/Site.css" />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see https://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="MsAjaxBundle" />
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" path="~/Scripts/bootstrap.js" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Name="WebFormsBundle" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div><h1 class="h1top"></h1></div>
<div class="d-flex align-items-top px-5 mb-3">
<img src="images/azx.png" class="logo mr-3" />
<h4>test company</h4>
</div>
<div><h1 class="h1bottom"></h1></div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
任何帮助将不胜感激。
【问题讨论】：
这可能是因为最后一行的col-md-3 类吗？我不使用引导程序，但如果您使用 col-md-2 会怎样？
我试过 col-md-2 和 col-md-3 和 col-md-12，但文本框大小没有增加。
【参考方案1】：
由于您使用的是引导程序，您所要做的就是制作您的愿望专栏col-*-12。 Bootstrap 网格通常代表 12 列，所以如果你想让你的元素填满整行，你应该告诉它获取所有 12 列。
就像这样：
<div class="row">
<div class="col-md-12">
<label>Address1</label><br />
<asp:TextBox runat="server" ID="address1" CssClass="borderText textboxsizebig col-md-12" ></asp:TextBox></div>
</div>
更新
所以为了重现您的问题，我只是使用您当前的代码来进行更多说明，并应用了 HTML 属性而不是 ASP 属性（抱歉）。
为了完成这项工作，您需要将两个col-md-12 添加到您的元素中，一个用于您的包装器div，另一个用于您的input。第一个将告诉您的整个 div 适合 row，第二个将使您的输入适合剩余的 width（要获得更好的结果，请查看整页）。
.row
margin: 0 !important;
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<label>First Name</label><br />
<input runat="server" ID="fName" class="textboxsizeLarge borderText" />
</div>
<div class="col-md-4">
<label>Middle Name</label><br />
<input runat="server" ID="MdName" class="textBoxSizMd borderText" />
</div>
<div class="col-md-4">
<label>Last Name</label><br />
<input runat="server" ID="lname" class="textboxsizeLarge borderText" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<label>Address1</label><br />
<input runat="server" ID="address1" class="borderText textboxsizebig col-md-12" />
</div>
</div>【讨论】：
啊，我在对 OP 问题的评论中反其道而行之，呵呵，这可能就是答案。 添加 col-md-12 没有任何区别。它使文本框稍大，仅此而已。我在原始帖子中添加了更大文本框的新图片 我从 address1 文本框中删除了样式表。主容器是指我的 site.master 类。我在原始帖子中粘贴了我的 site.master 页面的部分代码和完整代码 谢谢！！有效。我不确定我做错了什么。我非常沮丧，以至于我要使用 flexbox。 你是对的。我的样式表有问题。谢谢。以上是关于在表单的第二行制作更大的文本框的主要内容，如果未能解决你的问题，请参考以下文章