web-dev-qa-db-ja.com

Bootstrapフォームに2つのフィールドを並べて表示します

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

ブートストラップを使用して、これをすべて同じ行で実行したいのですが、正しく動作するようには見えません。

これが私のコードです：

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

現在は次のようになっています。

screenshot

htmlcssasp.nettwitter-bootstraptwitter-bootstrap-3
53
user3788671

入力グループ を使用して同じ行にスタイルを設定するのはどうですか？

最後に使用する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>

次のようになります：

screenshot

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要素に変換するための演習として読者に任せます

105
KyleMit

Bootstrap 4に関する@KyleMitの回答は少し変更されました

<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>
5
Sam Bellerose

問題は、.form-controlクラスがnormal-flow-of-the-pageに従って新しい行にレンダリングされるDIV要素のようにレンダリングされることです。

このような問題を修正する1つの方法は、display:inlineプロパティを使用することです。したがって、display:inlineでカスタムCSSクラスを作成し、.form-controlクラスでコンポーネントにアタッチします。コンポーネントにもwidthが必要です。

この問題を処理する方法は他にもあります（form-controlクラスのいずれかに.colコンポーネントを配置するなど）、最も簡単な方法は.form-controlをinlineにすることです要素（spanがレンダリングする方法）

2
Mechkov

これが2014年に利用可能かどうかはわかりませんが、今はできます。

ただし、768px以上の画面解像度でのみ機能します。

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>

残念ながら、スニペットを実行すると、狭い幅のフレームにあるため、ここでは見えませんが、別の場所にコピーしてワイド画面で実行すると動作します。 stackoverflowに「フルスクリーン」ボタンがあることに気づいたので、それをクリックすると表示されます。

リファレンス： https://getbootstrap.com/docs/3.3/css/#forms-inline

1
adjenks