在窗体的第二行上制作一个较大的文本框

debugcn 发表于 Dev

安贾利

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

我希望地址1一直到“姓氏”文本框的开头

以下是我的样式表：

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

以下是我的整个sire.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>

任何帮助将不胜感激。

SMAKSS

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-04-6

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

在窗体的第二行上制作一个较大的文本框

在窗体的第二行上制作一个较大的文本框

更新

如何通过另一个窗体上的文本框更新datagridview中的选定行？

使用第一个文本框输入自动填充第二个文本框

如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

如何在VB中将文本从一个文本框保存/追加到同一窗体上的另一个文本框

如何访问子窗体上的文本框控件的值，其中子窗体本身只是主窗体的另一个子窗体上的控件

我想将选定的选项从一个文本框传递到第二个框

Excel VBA在工作表上的用户窗体上填充文本框，具体取决于另一个文本框输入

Javascript php验证，在2个文本框中填充一个文本框后，第二次提交表单

如果第一个文本框中有值，如何验证第二个文本框？

如何将文本从一个Web窗体文本框中移动到另一个Web窗体文本框中

制作空文本框并将焦点放在另一个文本框上

从第二个文本框获取数据

检索工作表中文本框的第二行

C＃如何在第二个文本框中输入数字。每当我单击按钮时，它就会一直出现在第一个文本框中

将多个文本框合并到一个单元格中，如果第二个，第三个没有值，如何...文本框然后继续代码

画一个文本框

当我关闭另一个窗体时如何在文本框中设置焦点？

如何只允许数字和一个小数点在Web窗体文本框中

如何对用户窗体列表框中的1个特定列求和以在同一窗体上的文本框中显示

根据另一个表单上的值在报表上填充文本框

从我应用了 jquery 日期时间选择器的第二个文本中选择日期后，它会更改第一个文本框中的日期

C＃Windows窗体如何根据第一个组合框中的选择更改第二个组合框的值

在 Windows 窗体中由第一个窗体打开的第二个窗体关闭时设置第一个窗体的事件

从另一个类更新WinForm上的文本框

jQuery：在填充最后一个文本框时创建新的文本框

根据另一个文本框MVC 4填充文本框

禁用文本框，取决于另一个文本框的值

在另一个文本框中输入数据时文本框完成

合并来自文本框的输入以自动填充另一个文本框