将 ASP.NET 文本框扩展到行宽 - 引导 css答案

【问题标题】：Extending ASP.NET textbox to width of row - bootstrap css将 ASP.NET 文本框扩展到行宽 - 引导 css
【发布时间】：2018-03-12 06:09:21
【问题描述】：

我是第一次使用 ASP.NET，但我承认我在 HTML 方面已经相当缺乏经验。我正在使用引导网格，并且我正在创建一个具有这种模式的表单：

        <div class="container">
        <div class="row dataPanel">

        <h4><b>1.First question goes here</b></h4>

        <div class="col-lg-12">
            <asp:RadioButtonList ID="q1Score" CssClass="radioButtonList" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="1">1</asp:ListItem>
                <asp:ListItem Value="2">2</asp:ListItem>
                <asp:ListItem Value="3">3</asp:ListItem>
                <asp:ListItem Value="4">4</asp:ListItem>
                <asp:ListItem Value="-1">N/A</asp:ListItem>
            </asp:RadioButtonList>

            <br />
            Comments:
            <asp:TextBox ID="q1CommentBox" TextMode="MultiLine" CssClass="commentBox" runat="server" />

        </div>
    </div>
    </div>

我的自定义 CSS 如下所示：

.radioButtonList label {
width: 25px;
margin-right: 15px;
margin-left: 2px;
display: compact;
font-size: 10pt;
text-align: center;
}


.commentBox {
border-style: solid;
border-color: dimgray;
width: 100%;
height:50%;
}

.dataPanel {
border: solid;
border-radius: 4px;
border-width: 1.5px;
padding: 20px;
}

无论我是否将注释框包含在样式为 col-12-lg 或行的 div 中，我都无法扩展行的宽度。在引导程序中，这意味着相当于 12 列，对吗？

有什么建议吗？

【问题讨论】：

它是否适用于width: 100% !important;？请注意，多行文本框变成了 html 中的 TextArea，也许它在某处有自己的 CSS。
不，!important 标签没有任何作用。将它呈现到 TextArea 中绝对是正确的，但是我的 commentBox css 类应该适用于文本区域和文本框。我删除了 Multiline 参数以将其变成单行文本框，但它仍然是相同的宽度。
感谢 VDWWD，查看我的样式表中的 textarea 类显示宽度限制设置为 280 像素。

标签： html css asp.net bootstrap-4

【解决方案1】：

ASP 文本框本质上是创建一个 HTML 输入框。这些是内联元素，这意味着您需要将宽度设置为 100%，以使用其容器的整个宽度。

#q1CommentBox{
  width: 100%;
}

希望这会有所帮助。

【讨论】：

我已经将我的自定义 css 类：commentBox 作为 CssClass 参数添加到。如果你看到上面的 commentBox 类，你应该看到 width: 100%。不过，我删除了文本框的 CssClass 参数，并将您的建议添加到我的 css 中。这导致文本框更短。
在没有上下文的情况下很难判断周围 CSS 的外观，但 col-lg-12 确实包含一些填充，但通常不足以产生影响。我通常会检查 chrome 中的元素，看看我的哪些 css 规则有效果，然后从那里向后工作。
TidyDev，这是正确的地方。发现一行 css 将文本区域宽度限制为 280px。问题解决了！

【解决方案2】：

感谢 TidyDev 和 VDWWD 引导我朝着正确的方向前进。当我构建页面并检查 textarea 元素时，会显示 textarea 的样式类：

input, select, textarea {
     max-width: 280px;
}

这个类将我的文本限制在一个设定的宽度。它不存在于我的 boostrap 样式表（或项目附加的任何其他样式表）中，所以我不确定它来自哪里。我将这个类添加到我的自定义样式表中并调整了宽度 - 问题已解决。

【讨论】：