ASP.NET CSS - 将文本框设置为 div 的 100% 宽度

Posted 2023-03-06

【中文标题】ASP.NET CSS - 将文本框设置为 div 的 100% 宽度

【英文标题】：ASP.NET CSS - Set Textbox to 100% width of div

【发布时间】：2021-01-28 07:19:29

【问题描述】：

我想让我的 ASP.NET C# 文本框跨越 div 的整个宽度并做出响应。另外，如果有选项，我正在使用 Bootstrap 4。

我已尝试将 div 放置在具有居中和扩展功能的 div 中。 margin-left & right 设置为 auto 显示：块、Flex 和内联块 硬编码大小 CSS 大小调整 盒子尺寸 十几个 Bootstrap 类 还有更多。

这是我得到的照片。

这是 ASPX 和 html 代码

         <div class="col-sm-6">
            <asp:Label ID="lblContactHeader" runat="server" Text="Drop us a line" Font-Bold="True" CssClass="large-label"></asp:Label>
            <br />
            <div class="form-group">
                <asp:Label ID="lblName" runat="server" Text="Name*"></asp:Label><br />
                <asp:TextBox ID="txtName" runat="server" CssClass="inputSize"></asp:TextBox><br />
            </div>
            <div class="form-group">
                <asp:Label ID="lblPhone" runat="server" Text="Phone*"></asp:Label><br />
                <asp:TextBox ID="txtPhone" runat="server" CssClass="inputSize"></asp:TextBox><br />
            </div>
            <div class="form-group">
                <asp:Label ID="lblEmail" runat="server" Text="Email*"></asp:Label><br />
                <asp:TextBox ID="txtEmail" runat="server" CssClass="inputSize"></asp:TextBox><br />
            </div>
            <div class="form-group">
                <asp:Label ID="lblComments" runat="server" Text="Comments*"></asp:Label><br />
                <asp:TextBox ID="txtComments" runat="server" CssClass="inputSize" TextMode="MultiLine" Rows="3"></asp:TextBox>
            </div>
            <br />
            <asp:Button ID="custContact" runat="server" Type="submit" Text="Submit" CssClass="btn btn-orange btn-right"/>
        </div>

这是当前的 CSS 代码。我在其他 Stack Overflow 帖子上尝试了 10 多种不同的建议。

.inputSize 
width: 100%;
margin-left: 0px;
margin-right: 0px;
padding-left: 0px;
padding-right: 0px;

这是 HTML 代码版本。

                    <label>Name*</label>
                    <input type="text" name="custName" class="form-control" required />
                    <label>Phone*</label>
                    <input type="text" name="custPhone" class="form-control" placeholder="(###) ###-####" pattern="^\d10$|^(\(\d3\)\s*)?\d3[\s-]?\d4$" required />
                    <label>Email*</label>
                    <input type="text" name="custEmail" class="form-control" required />
                    <label>Comments*</label>
                    <textarea class="form-control" name="custComm" required ></textarea>
                    <br/>
                    <input type="submit" name="btn-submit" id="custContact" value="Submit" class="btn btn-orange btn-right"/>

【问题讨论】：

如果您使用引导程序，您可以添加类 form-control 以添加引导程序输入样式，该样式将设置 display: block 并填充空间。

@bhmahler 我尝试在输入上使用表单控制；但是，仍然没有得到想要的结果。

您是否检查过是否覆盖了引导样式？听起来可能就是这种情况。

@bhmahler 谢谢你的建议！...我有一个流氓 CSS 文件，它覆盖了我的引导程序和自定义 CSS 文件。现在已经修好了！如果您想将其作为答案提交，我会将其标记为正确。

【参考方案1】：

这很可能是由于另一个样式表覆盖了引导样式。

【参考方案2】：

请阅读Bootstrap documentation，以便了解<div class="row" /> 和<div class="col-*" /> 的工作原理。此外，通读reponsive breakpoints 将有助于理解-sm-、-md- 等的含义。

如果你有

<div class="row">
    <div class="col-sm-6">
        ...
    </div>
</div>

它会给你 50% 的屏幕宽度，因为 Bootstrap 使用 12 列系统，而 6 是它的一半。

如果您需要 100%，只需去掉 <div class="row" /> 和 <div class="col-sm-6" /> 或将 <div class="col-sm-6" /> 更改为 <div class="col-sm-12" />。

要设置任何输入相对于其容器的 100% 宽度，就像 @bhmahler 在评论中所说的那样，您需要将 .form-control 设置为输入，这将设置输入 display: block; 和 @ 987654335@:https://getbootstrap.com/docs/4.5/components/forms/#layout

【讨论】：

我有两个 一个用于左侧，它工作正常；但是，带有一般信息的右侧无法正常工作。

查看我的更新。我不清楚你在问什么。您的示例代码只有一个 col-sm-6，它们是 asp.net 代码...

我已将表单控件添加到每个输入的 CssClass 属性中。这样做会使它占用一半的宽度而不是三分之一。当我尝试删除行功能或将此列更改为 col-sm-12 时，它只是将文本框推到了左侧下方；但是，没有展开。

您需要将生成的 HTML 粘贴到您的问题中，而不是那个 asp.net 代码。没有人可以重新运行那段代码。

嘿@David，我在帖子底部添加了代码的 HTML 版本，但使用纯 HTML 仍然得到相同的结果。要添加，它位于表单控件中。