我正在将C#.NET与Webforms一起使用。
我创建一个控件以在数据库中查找主题。
该控件有一个文本框和一个按钮。
有时可以隐藏/删除按钮,这就是问题所在!
当该按钮可见时,html渲染正常。
但是当按钮被隐藏/删除时,html坏了...
我的HTML是这样的:
<div class="input-group">
<asp:TextBox runat="server" ID="SubjectTextBox" CssClass="SubjectTextBox form-control"></asp:TextBox>
<span class="input-group-btn">
<button id="SearchSubjectBtn" class="btn btn-default" type="button" runat="server">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search
</button>
</span>
</div>
如下所示:
如何修复html,以便可以正确的形式呈现?
我知道我可以从“ div”中删除“ input-group”类,但是我不想用C#做到这一点。
原因是,我不想在我的代码上管理CSS。
实际上,仅删除类即可,但不会正确,对吗?
有办法轻松做到这一点吗?
最佳答案
好吧,我做了很多研究,发现了this question。
this bug report新版Bootstrap的实现是在width: auto
上实现.input-group
来解决一些问题。
因此,我的代码上的行为是预期的。
为了解决这个问题,我在bootstrap.css之后添加了以下CSS代码:
<!--
https://github.com/twbs/bootstrap/issues/14272
https://stackoverflow.com/questions/24592969/boostrap-3-1-1-nav-bar-maximized-input-no-longer-maximized-in-3-2-0
-->
<style>
/* make sure input-group goes 100% i.e. full width of screen
to compliment the display: inline-table; that showed up in 3.2.0 */
.input-group
{
width: 100%;
}
/* override width: auto; that showed up in 3.2.0
with at least 1px for the addon or btn (I had an addon) */
.input-group .input-group-addon,
.input-group .input-group-btn
{
width: 1px;
}
/* separate .form-control and give it width: 100%; */
.input-group .form-control
{
width: 100%;
}
/* make sure navbar-form's input-group goes 100% i.e. full width of screen
to compliment the display: inline-table; that showed up in 3.2.0 */
.navbar-form .input-group {
width: 100%;
}
/* override width: auto; that showed up in 3.2.0
with at least 1px for the addon or btn (I had an addon) */
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn {
width: 1px;
}
/* separate .form-control and give it width: 100%; */
.navbar-form .input-group .form-control {
width: 100%;
}
</style>
这固定了我网站上的布局。
但是对我来说,Bootstrap上的该字段看起来似乎不正确。我将继续观看此错误报告,以查看是否有更多信息。