我正在将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>&nbsp;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上的该字段看起来似乎不正确。我将继续观看此错误报告,以查看是否有更多信息。

10-05 21:03
查看更多