twitter-bootstrap - Twitter Bootstrap - ラベルをテキスト入力に揃える (推奨される方法)

Question

私はフィドルを作成しましたが、これは基本的に、私が取り組んでいるアプリケーションのログインウィンドウに使用しているものです。

コントロールが重なり合う前にウィンドウの画面サイズが縮小されると、入力コントロールがラベルに重なって表示されます。これを回避するためにラベルにスパンを追加するだけで済みますが、ラベルのスパンを増やすと、入力間のギャップが大きくなりすぎます。

私の解決策（フィドルでは行われませんでした）は、固定ピクセルをラベルと親ラッパーに割り当ててオーバーラップを停止し、ガター（ギャップ）をより細かく制御することでしたが、これはベストプラクティスではなく、コードが乱雑になると思います. 私が達成しようとしていることを行うためのエレガントな方法に関する提案はありますか?

Bootstrap を使用してテンプレート UI を文書化しています。私の目的は、Bootstrap を最大限に活用し、アドホック ソリューションを減らすことです。

<div class="row-fluid">
    <div class="span6 offset3">
        <div class="login_frame">
            <div style="text-align: center;">
                 <h2>Title</h2>
            </div>
            <div class="row-fluid">
                <div class="span2">
                    <label>Username</label>
                </div>
                <div class="span9">
                    <input type="text" class="input-block-level">
                </div>
            </div>
            <div class="row-fluid">
                <button class="span3 offset8">Log in</button>
            </div>
        </div>
    </div>
</div>