扩展窗口大小时分离的Bootstrap输入组元素

时间:2015-06-30 18:10:21

标签: html twitter-bootstrap

我有一个带有输入和按钮的基本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,它将不会创建空间。然而,这使得输入太小而不能满足我的需要。另外,我猜测如果我将浏览器扩展得足够远,那么空间就会重新出现。

1 个答案:

答案 0 :(得分:3)

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

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

首先是直接调整输入控件的最大宽度。这允许输入控件扩展并填充额外的空间。这可以在很多地方完成(css样式表,jquery / javascript或html中的标记本身)。我继续把它包含在样式表中。

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

最后,我最终使用这两种方法来保持我的输入控件大小相同,并确保有人必须使用一个可笑的大显示器来分隔输入和按钮。

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

希望这有助于某人