控制文本输入的宽度

Question

我正在尝试使用左侧的搜索输入（文本输入和“附加”按钮）创建一行，右侧的按钮（网格上方的位）：

以下是代码：

<form class="row form-inline">
    <div class="form-group col-xs-6">
        <div class="input-group">
            <input name="search" type="text" class="form-control input-sm">
            <span class="input-group-btn">
                <button class="btn btn-default btn-sm" type="submit">
                    <span class="glyphicon glyphicon-search"></span>  Search
                </button>
            </span>
        </div>
    </div>

    <div class="form-group col-xs-6">
        <a class="btn btn-default btn-sm pull-right" href="#">
            <span class="glyphicon glyphicon-user"></span>  Create
        </a>
    </div>
</form>

问题是文本输入的宽度在'lg'和'md'浏览器大小时太小，并且只有在浏览器尺寸较小时才会增加到看起来正常的东西。在较大的浏览器尺寸下增加搜索输入宽度的最佳方法是什么？

Answer 1

为什么不使用bootstrap类设置输入的宽度？ e.g。

<input name="search" type="text" class="form-control col-lg-10 col-md-8 col-sm-12 col-xs-12">

Answer 2

试试这个

<form class="row form-inline">
    <div class="form-group col-md-8">
        <div class="input-group">
            <input name="search" type="text" class="form-control col-md-6">
            <span class="input-group-btn col-md-2">
                <button class="btn btn-default" type="submit">
                    <span class="glyphicon glyphicon-search"></span>  Search
                </button>
            </span>
        </div>
    </div>

    <div class="form-group col-md-4">
        <a class="btn btn-default pull-right" href="#">
            <span class="glyphicon glyphicon-user"></span>  Create
        </a>
    </div>
</form>

Answer 3

正如您在Bootstrap DOC中所见，form-inline需要为输入组件设置宽度：

http://getbootstrap.com/css/#forms-inline

要解决这个问题，我有自定义类：

.input-width-X {width: X}
.input-width-Y {width: Y}
...

并对此类使用媒体查询，以便在您不处于XS模式时应用它们，因为Bootstrap在其上设置了100％的宽度。

对不起我的英文：）