Html Bootstrap 3.0：如何在同一行上输入文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18499041/
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
Bootstrap 3.0: How to have text and input on same line?
提问by fat fantasma
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.
我目前正在将我的网站切换到 Bootstrap 3.0。我在表单输入和文本格式方面遇到问题。在 Bootstrap 2 中起作用的在 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.
如何在表单输入之前和之后在同一行上获取文本？我已将其范围缩小到示例的 Bootstrap 3 版本中的“form-control”类的问题。
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.
我将如何在一行中获取所有文本和输入？我希望 bootstrap 3 示例看起来像 jsfiddle 中的 bootstrap 2 示例。
<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>
采纳答案by lomteslie
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.
我会将您想要内联的每个元素放在您行内的单独 col-md-* div 中。或者强制您的元素内联显示。form-control 类显示块，因为这是引导程序认为应该完成的方式。
回答by Denis Besic
Straight from documentation http://getbootstrap.com/css/#forms-horizontal.
直接来自文档http://getbootstrap.com/css/#forms-horizontal。
Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding .form-horizontalto the form (which doesn't have to be a <form>). Doing so changes .form-groupsto behave as grid rows, so no need for .row.
使用 Bootstrap 的预定义网格类通过添加.form-horizontal到表单（不必是<form>）来对齐水平布局中的标签和表单控件组。这样做会更改.form-groups为网格行，因此不需要.row.
Sample:
样本：
<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>
回答by Reza Shirazian
回答by hakunin
None of these worked for me, had to use .form-control-staticclass.
这些都不适合我，不得不使用.form-control-static类。
回答by Paulo Fidalgo
回答by welboy
just give mother of div "class="col-lg-12""
只给 div 的母亲 "class="col-lg-12""
<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>
it will be
这将是
<div class="form-group">
<div class="col-lg-12">
<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>
</div>
回答by Hugo Nava Kopp
The way I solved it was simply to add an override for all my textboxes on the main css of my site, as so:
我解决它的方法只是在我网站的主要 css 上为我的所有文本框添加一个覆盖，如下所示：
.form-control {
display:initial !important;
}
回答by Tushar Dhingra
all please check the updated code as we have to use
所有请检查更新的代码，因为我们必须使用
form-control-static not only form-control
http://jsfiddle.net/tusharD/58LCQ/34/
http://jsfiddle.net/tusharD/58LCQ/34/
thanks with regards
谢谢
回答by Liam
In Bootstrap 4 for Horizontal element you can use .rowwith .col-*-*classes to specify the width of your labels and controls. see this link.
在引导4的水平元素，你可以使用.row与.col-*-*类指定标签和控件的宽度。看到这个链接。
And if you want to display a series of labels, form controls, and buttons on a single horizontal row you can use .form-inlinefor more info this link
如果您想在单个水平行上显示一系列标签、表单控件和按钮，您可以使用.form-inline此链接获取更多信息
回答by AgilePro
Or you can do this:
或者你可以这样做：
<table>
<tr>
<td><b>Return:</b></td>
<td><input id="return1" name='return1'
class=" input input-sm" style="width:150px"
type="text" value='8/28/2013'></td>
</tr>
</table>
I tried every one of the suggestions above and none of them worked. I don't want to pick a fixed number of columns in the 12 column grid. I want the prompt, and the input right after it, and I want the columns to stretch as needed.
我尝试了上述所有建议，但都没有奏效。我不想在 12 列网格中选择固定数量的列。我想要提示，然后是它之后的输入，并且我希望列根据需要进行拉伸。
Yes, I know, that is against what bootstrap is all about. And you should NEVER use a table. Because DIV is so much better than tables. But the problem is that tables, rows, and cells actually WORK.
是的，我知道，这违背了引导程序的全部意义。你永远不应该使用桌子。因为 DIV 比表格好得多。但问题是表格、行和单元格实际上可以工作。
YES - I REALLY DO know that there are CSS zealots, and the knee-jerk reaction is never never never use TABLE, TR, and TD. Yes, I do know that DIV class="table" with DIV class="row" and DIV class="cell" is much much better. Except when it doesn't work, and there are many cases. I don't believe that people should blindly ignore those situations. There are times that the TABLE/TR/TD will work just fine, and there is not reason to use a more complicated and more fragile approach just because it is considered more elegant. A developer should understand what the benefits of the various approaches are, and the tradeoffs, and there is no absolute rule that DIVs are better.
是的 - 我真的知道有 CSS 狂热者，下意识的反应永远不会永远不会使用 TABLE、TR 和 TD。是的，我知道 DIV class="table" 与 DIV class="row" 和 DIV class="cell" 要好得多。除非它不起作用，而且有很多情况。我不认为人们应该盲目地忽视这些情况。有时 TABLE/TR/TD 会工作得很好，并且没有理由仅仅因为它被认为更优雅而使用更复杂和更脆弱的方法。开发人员应该了解各种方法的好处和权衡，并且没有绝对的规则表明 DIV 更好。
"Case in point - based on this discussion I converted a few existing tds and trs to divs. 45 minutes messing about with it trying to get everything to line up next to each other and I gave up. TDs back in 10 seconds later - works - straight away - on all browsers, nothing more to do. Please try to make me understand - what possible justification do you have for wanting me to do it any other way!" See [https://stackoverflow.com/a/4278073/1758051]
“举个例子——基于这个讨论，我将一些现有的 tds 和 trs 转换为 divs。45 分钟搞乱它试图让所有东西彼此对齐，我放弃了。TDs 在 10 秒后回来——有效- 马上 - 在所有浏览器上，没有更多的事情要做。请试着让我明白 - 你有什么可能的理由希望我以任何其他方式做它！” 见 [ https://stackoverflow.com/a/4278073/1758051]
And this: "
和这个： ”
Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail"." [https://stackoverflow.com/a/4964107/1758051]
布局应该很容易。有关于如何在 CSS 中实现带有页眉和页脚的动态三列布局的文章表明这是一个糟糕的布局系统。当然，你可以让它工作，但网上有数百篇关于如何做到这一点的文章。几乎没有类似表格布局的文章，因为它很明显。无论您反对表格还是赞成 CSS，这一事实都会使这一切无效：CSS 中的基本三列布局通常被称为“圣杯”。” [ https://stackoverflow.com/a/4964107/ 1758051]
I have yet to see a way to force DIVs to always line up in a column in all situations. I keep getting shown trivial examples that don't really run into the problems. "Responsive" is about providing a way that they will notalways line up in a column. However, if you really want a column, you can waste hours trying to get DIV to work. Sometimes, you need to use appropriate technology no matter what the zealots say.
我还没有看到一种方法来强制 DIV 在所有情况下总是排在一个列中。我不断看到一些没有真正遇到问题的琐碎示例。“响应式”是关于提供一种方式，使它们不会总是排在一个列中。但是，如果您真的想要一个列，您可能会浪费数小时试图让 DIV 工作。有时，无论狂热者说什么，您都需要使用适当的技术。
