引导表单组将文本框与按钮分开

Posted 2023-05-08

【中文标题】引导表单组将文本框与按钮分开

【英文标题】：bootstrap form-group separating textbox from button

【发布时间】：2015-12-19 23:46:23

【问题描述】：

我正在尝试使用 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>

我做错了什么？

【问题讨论】：

删除文本框和按钮之间的空格（嗯，换行符）是否有帮助？

@MrLister 到底在哪里？

您是否尝试过将输入组嵌套在列网格下的自己的 div 中？

【参考方案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;

【讨论】：

谢谢先生！我最终从 site.css 中删除了 sn-p。

【参考方案2】：

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

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