自举:全宽度输入
问题描述:
我创建了自举的一种形式:自举:全宽度输入
<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 ------
我希望你明白我的作品的艺术^^
答
您可以使用引导电网做到这一点:
<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网格做工作。
答
在这里你去的,这可以帮助你:)
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);
});
});
答
您可以与您现有的代码
.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答案,它更灵活,并且可以在移动
充分与inouts感谢这对我的工作最好:)尼斯提示与内联。从“良好的内联”转变为“良好”的大小诀窍:) – LuMa 2014-12-13 06:52:13