控制文字输入的宽度

Question

I'm trying to create a single row with search inputs (a text input and an 'attached' button) at the left, and a button at the right (the bit above the grid):

Here's the code:

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

The problem is that the width of text input is too small at the 'lg' and 'md' browser sizes, and only increases to something that looks OK when the browser is at smaller sizes. What's the best way to increase the width of the search input at larger browser sizes?

Answer 1

why dont you set the width on the input using bootstrap classes? eg

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

Answer 2

Try this as well

<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

As you can see in Bootstrap DOC form-inline require setting a width for input componentes:

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

To solve that problem I have custom classes for that:

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

and use media queries for this classes in order to apply them just when you are not in XS mode, because Bootstrap set 100% width on it.

Sorry about my english :)