按钮不存在时呈现输入组

Question

我将 C#.NET 与网络表单结合使用。我创建了一个控件来在我的数据库中查找主题。这个控件有一个文本框和一个按钮。按钮有时可以 hidden/removed，这就是问题所在！

当按钮可见时，html 渲染正常。但是当按钮是 hidden/removed 时，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" class，但我不想通过 C# 执行此操作。原因是我不想在我的代码上管理 css。

实际上，只需删除 class 即可，但不会正确，对吗？

有办法轻松做到吗？

Answer 1

嗯，我做了很多研究，发现 this question。

根据 this bug report 的新版本 Bootstrap 在 .input-group 上实施 width: auto 以解决一些问题。

所以，我的代码的行为是预期的。

为了解决这个问题，我在 bootstrap.css:

之后添加了 css 代码

<!--
    https://github.com/twbs/bootstrap/issues/14272
    
-->
<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 上的这个字段似乎有些不对劲。我会继续关注此错误报告，看看是否能找到更多信息。

按钮不存在时呈现输入组

Rendering input-group when button is not present

html

css

webforms

twitter-bootstrap-3