引导3.0：如何在同一行上有文本和输入？ [英] Bootstrap 3.0: How to have text and input on same line?
问题描述
如何在表单输入之前和之后在同一行上获取文本？我已经将范围缩小到示例的Bootstrap 3版本中的form-control类。
如何获取所有文本和在一行上输入？我想bootstrap 3的例子看起来像在jsfiddle引导2例子。
< div class =container>
< form>
< h3>在Bootstrap 2中使用的格式< / h3>
< div class =row>
< label for =return1>< b>返回：< / b>< / label>
< input id =return1name ='return1'class =input input-smstyle =width：150px
type =textvalue ='8/28/2013'>
< span id ='return1'style ='color：blue'> +/- 14天< / span>
< / div>
< br>
< br>
< h3> BootStrap 3版本< / h3>
< div class =row>
< label for =return2>< b>返回：< / b>< / label>
< input id =return2name ='return2'class =form-control input input-smstyle =width：150px
type =textvalue ='8/28 / 2013' >
< span id ='return2'style ='color：blue'> +/- 14天< / 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>
< option>经济< / option>
< option>特级经济< / option>
< option> Club World< / option>
< option>头等舱< / option>
< / select>
< / div>
< / div>
我会把你想要的每个元素内联在你的行内的一个单独的col-md- * div中。或者强制你的元素内联显示。窗体控件类显示块，因为这是bootstrap认为应该完成的方式。
I'm currently switching my website over to Bootstrap 3.0. I'm having an issue with form input and text formatting. What worked in Bootstrap 2 does not work in Bootstrap 3.
How can I get text on the same line before and after a form input? I have narrowed it down to a problem with the 'form-control" class in the Bootstrap 3 version of the example.
How would I go about getting all the text and input on one line? I would like the bootstrap 3 example to look like the bootstrap 2 example in the jsfiddle.
<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>
Update: I change the code to this which works but having trouble with alignment now. Any ideas?
<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>
I would put each element that you want inline inside a separate col-md-* div within your row. Or force your elements to display inline. The form-control class displays block because that's the way bootstrap thinks it should be done.
这篇关于引导3.0：如何在同一行上有文本和输入？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
