我目前正在将我的网站切换到Bootstrap 3.0。我有一个问题与表单输入和文本格式。在Bootstrap 2中工作的内容在Bootstrap 3中不工作。
如何在表单输入前后获取同一行上的文本？我已经把它缩小到示例的bootstrap3版本中的“formcontrol”类的问题。
我如何在一行中获取所有的文本和输入？我希望引导3示例看起来像jsfiddle中的引导2示例。
JS小提琴示例
<div class="container ">
<form>
<h3> Format used to look like this in Bootstrap 2 </h3>
<div class="row ">
<label for="return1"><b>Return:</b></label>
<input id="return1" name='return1' class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return1' style='color:blue'> +/- 14 Days</span>
</div>
<br>
<br>
<h3> BootStrap 3 Version </h3>
<div class="row">
<label for="return2"><b>Return:</b></label>
<input id="return2" name='return2' class="form-control input input-sm" style="width:150px"
type="text" value='8/28/2013'>
<span id='return2' style='color:blue'> +/- 14 Days</span>
</div>
</form>
更新：我把代码改成了这个，但是现在对齐有问题。有什么想法吗？
<div class="form-group">
<div class="row">
<div class="col-xs-3">
<label for="class_type"><h2><span class=" label label-primary">Class Type</span></h2></label>
</div>
<div class="col-xs-2">
<select name="class_type" id="class_type" class=" form-control input-lg" style="width:200px" autocomplete="off">
<option >Economy</option>
<option >Premium Economy</option>
<option >Club World</option>
<option >First Class</option>
</select>
</div>
</div>
直接从留档http://getbootstrap.com/css/#forms-horizontal.
通过添加，使用引导的预定义网格类在水平布局中对齐标签和表单控件组。表单水平到表单（不必是
样本：
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
我会将您想要内联的每个元素放在行中一个单独的col md-*div中。或者强制元素以内联方式显示。表单控件类显示block，因为引导程序认为应该这样做。
您需要的是。表单内联类。但是，使用新的，您需要小心。类型inlineclass必须为每个控件指定宽度。
看看这个
