时间戳

首页 > 解决方案 > 在表单的第二行制作更大的文本框

html - 在表单的第二行制作更大的文本框

问题描述

我的表单上有两行文本框。第一行有三个文本框，下一行，我只想要一个宽度为 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>

任何帮助将不胜感激。

标签： htmlcssasp.netbootstrap-4flexbox

解决方案

由于您使用的是引导程序，因此您所要做的就是制作您的愿望列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>

推荐阅读