扩展窗口大小时分离的引导输入组元素答案

【问题标题】：Bootstrap input-group elements separating when extending window size扩展窗口大小时分离的引导输入组元素
【发布时间】：2015-07-02 01:17:38
【问题描述】：

我有一个带有输入和按钮的基本 Bootstrap 输入组。当浏览器是“正常”宽度时，一切看起来都很好。但是，当我将它扩展到第二台显示器时，输入控件和按钮之间会出现一个空格。环顾四周，但我一直无法找到一种解决方案，以类似于 btn-group 工作方式的方式将它们保持在一起。

这是我的代码：

<div class="row">
    <div class="col-md-2 col-md-offset-1">
        <div class="input-group">
            <input id="SearchText" class="form-control" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
</div>

提前致谢！

更新：

在稍微弄乱了这个之后，它似乎与列属性有关。如果我改为使用外部 div col-md-1，它将不会创建空间。然而，这使得输入对于我需要它来说太小了。另外，我猜如果我将浏览器扩展得足够远，空间会重新出现。

【问题讨论】：

标签： html twitter-bootstrap

【解决方案1】：

找到了一个似乎可行的解决方案，所以我想我会分享它以防其他人遇到类似问题。

再看一遍之后，我发现输入控件达到其最大宽度时就会发生输入与按钮的分离。为了保持由列属性标签规定的所需比例，它在输入和按钮之间创建了一个空格（为什么它不只是在按钮后添加空格，我不知道）。我发现有两种方法可以实现我想要的：

第一种是直接调整输入控件的最大宽度。这允许输入控件扩展并填充额外的空间。这可以在许多地方完成（css 样式表、jquery/javascript 或 html 中的标记本身）。我继续并将其包含在样式表中。

第二种方法是包含一个小于col-md-* 属性的col-lg-* 属性。这减少了输入控件相对于屏幕的大小比例，并降低了它达到其最大宽度的可能性（它也使您的输入控件几乎不会扩展）。（注意：如果您使用这种方法，我建议您调整输入控件的最小宽度以保持更一致的大小）。

最后，我最终使用了这两种方法来保持输入控件的大小大致相同，并确保有人不得不使用大得离谱的显示器来分隔输入和按钮。

CSS：

input.form-control {
    max-width: 400px;
    min-width: 200px;
}

HTML：

<div class="row">
    <div class="col-md-2 col-md-offset-1 col-lg-1">
        <div class="input-group">
            <input id="SearchText" class="form-control" type="text">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </span>
        </div>
    </div>
</div>

希望这对某人有所帮助

【讨论】：