How to Control Input Width in Bootstrap 3 Forms?

Input Width Management in Bootstrap 3

Bootstrap 3 offers a limited range of options for controlling the width of form inputs. As the original question suggests, using .col-lg-x does not yield the desired result. This is because .col-lg-x can only be applied to container divs, leading to layout issues.

Alternative Approach

To achieve the desired functionality, consider wrapping each input group in its own row, rather than enclosing the entire form in a single row. For instance:

<code class="html"><form role="form">
    <div class="row">
        <div class="form-group col-lg-1">
            <label for="code">Name</label>
            <input type="text" class="form-control" />
        </div>
    </div>

    <div class="row">
        <div class="form-group col-lg-1">
            <label for="code">Email</label>
            <input type="text" class="form-control input-normal" />
        </div>
    </div>

    <div class="row">
        <button type="submit" class="btn btn-default">Submit</button>
    </div>
</form></code>

In this approach, each input group is wrapped in a separate .row, ensuring that the input widths remain consistent regardless of screen size. Additionally, by adding .col-lg-5 to the input container, you can control the input width in smaller screens as well.

Limitations

It's important to note that the original question aimed for a solution using built-in BS functionality without resorting to grids. However, as the solution demonstrates, even built-in options require grid usage to achieve the desired behavior.

The above is the detailed content of How to Control Input Width in Bootstrap 3 Forms?. For more information, please follow other related articles on the PHP Chinese website!