Bootstrapのフォームで2つのフィールドを並べて表示する

質問

2つのテキストボックスがあるフォームに、年の範囲の入力を表示しようとしています。1つは最小値、もう1つは最大値で、ダッシュで区切られています。

私はこれをすべて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>

今はこんな感じです。

どのように解決するのですか？

を使うのはどうでしょうか？ 入力グループ を使って、同じ行にスタイル付けするのはどうでしょうか？

最終的に使用する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のデモを紹介します。 :

<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 要素に変換してください。