自举：全宽度输入

我创建了自举的一种形式：自举：全宽度输入

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

我有多个区域以这种形式，如“个人”，“兴趣”等，这些区域或基团被一个很好的代表（我将它描述为一个groupbox），它包含输入。我的第一口井有3个输入管线。但是他们没有填满整个井（宽度）。我怎样才能扩展输入域来填充我的整个井？

它看起来像什么：

------------------------------ Well ------ ------------------------
---输入1 --- ---输入2 --- ---输入3 ---

我想要什么：

------------------------------嗯------ ------------------------
------输入1 ------ ------输入2 - ---- ------输入3 ------

我希望你明白我的作品的艺术^^

来源

2014-12-13 LuMa

您可以使用引导电网做到这一点：

<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网格做工作。

来源

2014-12-13 00:31:55 woubuc

充分与inouts感谢这对我的工作最好:)尼斯提示与内联。从“良好的内联”转变为“良好”的大小诀窍:) – LuMa 2014-12-13 06:52:13

-1

在这里你去的，这可以帮助你:)

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); 
    }); 
});

来源

2014-12-13 00:29:43

您可以与您现有的代码

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

用CSS这样做，但我建议改变你的HTML和使用woubucs答案，它更灵活，并且可以在移动

来源

2014-12-13 00:43:02

自举：全宽度输入

回答

相关问题