Bootstrap:全宽输入

Question

我用bootstrap创建了一个表单:

<form action="/user/add" method="POST" class="well form-inline">

    <fieldset>
        <legend>
            Information
        </legend>
        <div class="control-group">
            <div class="controls">
                <div class="form-group">
                    <input type="input" id="firstname" class="form-control" name="firstname">
                </div>

                <div class="form-group">
                    <input type="input" id="lastname" class="form-control" name="lastname">
                </div>

                <div class="form-group">
                    <input type="input" id="age" class="form-control" name="age">
                </div>
            </div>
        </div>
    </fieldset>

    <!-- Multiple other wells -->

</form>

我有这种形式的多个区域,如"个人","兴趣"等.这些区域或组由井(我将其描述为组合框)表示,其中包含输入.我的第一口井有3个输入内联.但它们并没有填满整个井(宽度).如何拉伸输入字段以填满我的整体？

它看起来像什么:

- - - - - - - - - - - - - - - 好 - - - - - - - - - - -----------
---输入1 --- ---输入2 --- ---输入3 ---

我想要的是:

- - - - - - - - - - - - - - - 好 - - - - - - - - - - -----------
------输入1 ------ ------输入2 ------ ------输入3 --- ---

我希望你理解我的艺术品^^

Answer 1

您可以使用Bootstrap网格执行此操作:

<div class="row">
  <div class="form-group col-md-4">
    <input type="input" id="firstname" class="form-control" name="firstname">
  </div>
  <div class="form-group col-md-4">
    <input type="input" id="lastname" class="form-control" name="lastname">
  </div>
  <div class="form-group col-md-4">
    <input type="input" id="age" class="form-control" name="age">
  </div>
</div>

编辑:你不会内联这个表单,你只需让Bootstrap网格完成工作.