bootstrap form-group将文本框与按钮分开

Question

我尝试使用asp.net和bootstrap创建一个带有文本框和按钮的表单组。

代码：

<div class="col-sm-4 col-md-4 col-lg-4 input-group">
    <asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
    <span class="input-group-btn">
        <asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
    </span>
</div>

这很好用：

但是，如果我展开浏览器的窗口，文本框和按钮就会分开：

此群组位于<div class="container-fluid"/>内。整个代码如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-4 col-lg-4 form-group">
            <label for="cbMarcas">Selecione a marca:</label>
            <asp:DropDownList ID="cbMarcas" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id" OnSelectedIndexChanged="cbMarcas_SelectedIndexChanged" AutoPostBack="True"></asp:DropDownList>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 form-group">
            <label for="cbModelos">Selecione o modelo:</label>
            <asp:DropDownList ID="cbModelos" CssClass="form-control" runat="server" ClientIDMode="Static" DataTextField="Descricao" DataValueField="Id"></asp:DropDownList>
        </div>

        <div class="col-sm-4 col-md-4 col-lg-4 input-group">
            <asp:TextBox ID="txtPN" runat="server" placeholder="Search" CssClass="form-control" ClientIDMode="Static" />
            <span class="input-group-btn">
                <asp:Button ID="btnSearchPN" runat="server" Text="Search" CssClass="btn btn-default" />
            </span>
        </div>
    </div>
</div>

我做错了什么？

Answer 1

首先，您不需要使用所有col-sm-4，col-md-4 ...... 每层类都会向上扩展，这意味着如果您计划为xs和sm设置相同的宽度，则只需指定xs。

我的猜测是您使用的是默认的.NET WebForms模板，所以在site.css中你有：

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

您需要添加自己的css来删除max-width属性：

#txtPN {
    max-width: initial;
}