html - Bootstrap : Full width inputs

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 个内联输入。但它们并没有填满整个井(宽度)。我怎样才能拉伸(stretch)输入字段以填满我的整个井？

它的样子:

---------------------------- 嗯---------------- --------------
--- 输入 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 网格完成工作即可。