本文介绍了在 Bootstrap 表单中并排显示两个字段的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我试图在具有 2 个文本框的表单上显示年份范围输入.一个用于最小值,一个用于最大值,并以破折号分隔.
我希望这一切都在使用引导程序的同一行上,但我似乎无法让它正常工作.
这是我的代码:
<div class="row"><div class="form-group"><label for="tbxContactPhone" class="col-sm-2 control-label">年份</label><div class="col-sm-4"><asp:TextBox ID="TextBox1" CssClass="form-control" runat="server" MaxLength="4"/>
<label class="col-sm-2 control-label">-</label><div class="col-sm-4"><asp:TextBox ID="TextBox2" CssClass="form-control" runat="server" MaxLength="4"/>
</表单>
这是现在的样子:
解决方案
如何使用 输入组 在同一行设置样式?
这是要使用的最终 HTML:
<input type="text" class="form-control" placeholder="Start"/><span class="input-group-addon">-</span><input type="text" class="form-control" placeholder="End"/>
看起来像这样:
这是一个堆栈片段演示:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="样式表"/><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"/>
我将把它作为练习留给读者,把它翻译成一个 asp:textbox
元素
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.
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:
解决方案
How about using an input group to style it on the same line?
Here's the final HTML to use:
<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:textbox
element
这篇关于在 Bootstrap 表单中并排显示两个字段的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!