Html 在 Bootstrap 表单中并排显示两个字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27451693/
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
Display two fields side by side in a Bootstrap Form
提问by user3788671
I am trying to display a year range input on a form that has a 2 textboxes. One for the min and one for the max and are separated by a dash.
我正在尝试在具有 2 个文本框的表单上显示年份范围输入。一个用于最小值，一个用于最大值，并以破折号分隔。
I want this all on the same line using bootstrap, but I cannot seem to get it to work correctly.
我希望这一切都在使用引导程序的同一行上，但我似乎无法让它正常工作。
Here's my code:
这是我的代码：
<form id="Form1" class="form-horizontal" role="form" runat="server">
<div class="row">
<div class="form-group">
<label for="tbxContactPhone" class="col-sm-2 control-label">Year</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4" />
</div>
<label class="col-sm-2 control-label">-</label>
<div class="col-sm-4">
<asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4" />
</div>
</div>
</div>
</form>
Here's what it looks like now:
这是它现在的样子：
回答by KyleMit
How about using an input groupto style it on the same line?
如何使用输入组在同一行上设置样式？
Here's the final HTML to use:
这是要使用的最终 HTML：
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>
Which will look like this:
看起来像这样：
Here's a Stack Snippet Demo:
这是一个堆栈片段演示：
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<span class="input-group-addon">-</span>
<input type="text" class="form-control" placeholder="End"/>
</div>I'll leave it as an exercise to the reader to translate it into an asp:textboxelement
我将把它作为练习留给读者将它翻译成一个asp:textbox元素
回答by Sam Bellerose
@KyleMit's answer on Bootstrap 4 has changed a little
@KyleMit 在 Bootstrap 4 上的回答略有变化
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-prepend">
<span class="input-group-text">-</span>
</div>
<input type="text" class="form-control">
</div>
回答by Mechkov
The problem is that .form-controlclass renders like a DIVelement which according to the normal-flow-of-the-pagerenders on a new line.
问题是.form-control该类呈现为一个DIV元素，它根据normal-flow-of-the-page新行上的呈现。
One way of fixing issues like this is to use display:inlineproperty. So, create a custom CSSclass with display:inlineand attach it to your component with a .form-controlclass. You have to have a widthfor your component as well.
解决此类问题的一种方法是使用display:inline财产。因此，创建一个自定义CSS类display:inline并使用类将其附加到您的组件.form-control。你width的组件也必须有一个。
There are other ways of handling this issue (like arranging your form-controlcomponents inside any of the .colclasses), but the easiest way is to just make your .form-controlan inlineelement (the way a spanwould render)
还有其他处理这个问题的方法（比如form-control在任何类中安排你的组件.col），但最简单的方法是让你.form-control的inline元素（aspan将呈现的方式）
回答by ADJenks
Not sure if this was available in 2014, but you can now.
不确定这是否在 2014 年可用，但现在可以了。
It only works on screen resolutions greater than 768px though.
不过，它仅适用于大于 768 像素的屏幕分辨率。
Valid for BS 3.3.7:
适用于 BS 3.3.7：
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<form class="form-inline">
<input type="text" class="form-control"/>-<input type="text" class="form-control"/>
</form>Unfortunately if you run the snippet it won't look right here, because it's in a frame that has a narrow width, but if you copy it somewhere else and run it on a wide screen it will work. I just noticed there is a "full screen" button in stackoverflow, click that and you can see it.
不幸的是，如果您运行该代码段，它不会在此处显示，因为它位于宽度较窄的框架中，但是如果您将其复制到其他地方并在宽屏幕上运行，它将起作用。我刚刚注意到 stackoverflow 中有一个“全屏”按钮，单击该按钮即可看到它。
Reference: https://getbootstrap.com/docs/3.3/css/#forms-inline
回答by Benoit
For Bootstrap 4
对于 Bootstrap 4
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="Start"/>
<div class="input-group-prepend">
<span class="input-group-text" id="">-</span>
</div>
<input type="text" class="form-control" placeholder="End"/>
</div>回答by mr.G
@KyleMit answer is one way to solve this, however we may chose to avoid the undivided input fields acheived by input-groupclass. A better way to do this is by using form-groupand rowclasses on a parent divand use inputelements with grid-system classes provided by bootstrap.
@KyleMit 答案是解决此问题的一种方法，但是我们可能会选择避免类实现的未分割输入字段input-group。一个更好的方法是在父级上使用form-group和row类，div并使用input由引导程序提供的网格系统类的元素。
<div class="form-group row">
<input class="form-control col-md-6" type="text">
<input class="form-control col-md-6" type="text">
</div>
