当按钮不存在时渲染输入组

Question

我正在使用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，以便以正确的形式呈现？

我知道我可以删除＆＃34;输入组＆＃34;来自＆＃34; div＆＃34;的课程，但我不想通过C＃来做这件事。 原因是，我不想在我的代码上管理css。

实际上，只需删除课程，就行了，但不会是正确的，对吧？

有一种方法可以轻松完成吗？

Answer 1

好吧，我做了很多研究，发现了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的这个领域看起来有些不对劲。我会继续关注这个错误报告，看看我是否能找到更多信息。