html - 控制文本输入的宽度

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

也试试这个

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