在Bootstrap表单中并排显示两个字段 [英] Display two fields side by side in a Bootstrap Form

问题描述

我想在带有2个文本框的表单上显示年份范围输入。一个用于最小值，一个用于最大值，并用短划线分隔。

我想使用bootstrap在同一行上，但我似乎无法使其正常工作。

这里是我的代码：

 < form id =Form1class =form-horizo​​ntalrole =form runat =server> 
< div class =row> 
< div class =form-group> 
< label for =tbxContactPhoneclass =col-sm-2 control-label>年< / label> 
< div class =col-sm-4> 
< asp：TextBox ID =TextBox1CssClass =form-controlrunat =serverMaxLength =4/> 
< / div> 
< label class =col-sm-2 control-label>  - < / label> 
< div class =col-sm-4> 
< asp：TextBox ID =TextBox2CssClass =form-controlrunat =serverMaxLength =4/> 
< / div> 
< / div> 
< / div> 
< / form> 
  

现在看起来像这样：

解决方案

如何使用输入组在同一行上设置样式？

这是最后使用的HTML ：

  < div class =input-group> 
< input type =textclass =form-controlplaceholder =Start/> 
< span class =input-group-addon>  - < / span> 
< input type =textclass =form-controlplaceholder =End/> 
< / div> 
  

这将是这样：

这是一个Stack Snippet Demo ：

  < link href =http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css =stylesheet/>< div class =input-group> < input type =textclass =form-controlplaceholder =Start/> < span class =input-group-addon>  - < / span> < input type =textclass =form-controlplaceholder =End/>< / div>   
 
 
我将把它作为练习留给读者将其翻译成 asp：textbox  p> 
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="http://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表单中并排显示两个字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！