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>

我在这个表单中有多个区域，例如＆＃34;个人＆＃34;，＆＃34;兴趣＆＃34;等等。这些区域或组由井表示（我将其描述为组合框），包含输入。我的第一口井有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网格完成工作。

Answer 2

您可以使用现有代码的css执行此操作

.control-group .form-group {
  float:left;
  width:32.666%;
}
.control-group .form-group + .form-group {
  margin-left:1%;
}
.control-group .form-control {
  width:100%;
}

但是我建议更改你的html并使用woubucs答案，它更灵活，并且可以在移动设备上充分实现inout

Answer 3

在这里，这可能对您有所帮助:)。

http://jsfiddle.net/DynamicRemo/8krcm0x6/1/

$('button').click(function() {
    var item = $('.item').length + 1;
    $('.contentBox').append('<div class="item">' + item + '</div>');

    var w = window.innerWidth;
    var l = $(".contentBox div").length + 1;
    $(".contentBox div").each(function(){
        $(this).css("width", w/l);
    });
});

Bootstrap：全宽输入

3 个答案: