在Bootstrap表单中并排显示两个字段

Question

我试图在具有2个文本框的表单上显示年份范围输入.一个用于最小值,一个用于最大值,并用短划线分隔.

我希望这一切都在使用bootstrap的同一行,但我似乎无法让它正常工作.

这是我的代码:

<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>

这是现在的样子:

Answer 1

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

这是最终使用的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>

这将是这样的:

这是一个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>

我将把它作为练习留给读者将其翻译成一个asp:textbox元素

Answer 2

@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>