【发布时间】：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="^\d{10}$|^(\(\d{3}\)\s*)?\d{3}[\s-]?\d{4}$" 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 文件。现在已经修好了！如果您想将其作为答案提交，我会将其标记为正确。
标签： css asp.net bootstrap-4