bootstrap form-group separating textbox from button

Question

I'm trying to make a form-group with a textbox and a button using asp.net and bootstrap.

Code:

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

This works just fine:

However, if I expand the browser's window, the textbox and the button got separated:

This group is inside <div class="container-fluid"/>. The entire code follows:

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

What I'm doing wrong?

Answer 1

First you don't need to use all col-sm-4, col-md-4... Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.

My guess is that you are using default .NET WebForms template so inside site.css you have:

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

You need to add own css for removing max-width property:

#txtPN {
    max-width: initial;
}