C# 从按钮分离文本框的引导窗体组

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

代码：

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


此组位于
内。整个代码如下：

<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>


Selecione a marca：
Selecione o modelo：

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

我猜您正在使用默认的.NET WebForms模板，因此在site.css中您有：

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

您需要添加自己的css以删除“最大宽度”属性：

#txtPN {
    max-width: initial;
}

对于ASP.NET项目，默认的Content/Site.css将文本输入的最大宽度设置为280px。如果删除或覆盖此选项，文本输入将填充输入组

input[type="text"],
input[type="password"] {
    /*max-width: 280px;*/
}

删除文本框和按钮之间的空格（嗯，换行符）有帮助吗？@MrLister确切位置？您是否尝试过将输入组嵌套在它自己的div中的柱网下？谢谢您，先生！我最终从site.css中删除了这个代码段。
input[type="text"],
input[type="password"] {
    /*max-width: 280px;*/
}