twitter-bootstrap 使用 Bootstrap 创建响应式输入表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15924422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a reponsive input form with Bootstrap
提问by cevizmx
I am trying to realize the screen shown on the screenshot. But I cannot control the space between elements. I want it to be responsive but I guess I cannot manage the high res screen layout this time. The code is below and I have added a wireframe of the screen. When adding some elements with prepend it always ruins my deams :)
我正在尝试实现屏幕截图上显示的屏幕。但我无法控制元素之间的空间。我希望它具有响应性，但我想这次我无法管理高分辨率屏幕布局。代码在下面，我添加了屏幕的线框。当添加一些带有 prepend 的元素时，它总是会破坏我的 deams :)
link to file: jsfiddle.net/AmhHf
文件链接：jsfiddle.net/AmhHf
![<div class="container-fluid">
<div class="row-fluid">
<div class="span8">
<h1>Formulate</h1>
</div>
<div class="span4 pull-right"> </div>
</div>
<div class="row-fluid">
<form class="well span12">
<div class="row-fluid">
<div class="span12">
<label>Formula Name</label>
<input type="text" class="span8">
</div>
<div class="span8"> </div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid"></div>
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-medium">
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="form-actions pull-right">
<button type="submit" class="btn btn-primary">Submit</button>
<input type="reset" class="btn" value="Reset">
</div>
</div>
</form>
</div>
</div>][3]
Edit:
编辑：
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pagetitle</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim for IE backwards compatibility -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
回答by ngm
This appears to be related to a bug in bootstrapthat will be resolved in v3.
As per one of the comments in that link, for now you can use this jQuery snippet to resolve the issue:
根据该链接中的评论之一，现在您可以使用此 jQuery 代码段来解决该问题：
jQuery(function($) {
$(window).resize(function() {
$(".input-prepend, .input-append").each(function(index, group) {
var input = $("input", group).css('width', '');
$(".add-on, .btn", group).each(function() {
input.css('width', '-=' + $(this).outerWidth());
});
});
}).trigger('resize');
});
And I'd recommend changing the class of your inputs to input-block-level.
我建议将您的输入类别更改为input-block-level.
<div class="row-fluid">
<div class="span3">
<label>My Label</label>
</div>
<div class="span3">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" class="input-block-level"/>
</div>
</div>
<div class="span3">+</div>
<div class="span3">
<select class="input-block-level">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
See this updated jsfiddleand how the first line of inputs now resizes correctly.
请参阅此更新的 jsfiddle以及第一行输入现在如何正确调整大小。
