2

このコードの出力（これをjsFiddleに投稿しようとしましたが、現在は機能していないようです）は妥当なように見えますが、ラベルの左側に「無駄な」スペースがたくさんあります。フィールド自体がここにあるのと同じくらい広いことが重要です。

ここに画像の説明を入力してください

これは、フィールドが多く、スペースが限られている実際の状況では問題になります。コントロールグループの合計幅とは関係なくラベル幅を制御できるようにしたい、フィールドに右揃えのままにしておきたい、そして（最も重要なのは）ラベルを短くしてフィールドも左に移動させたい（これは、コントロールラベルの幅を壊しただけでは起こりません）。

私はLESSを掘り下げることに熱心ではありません、それが私の唯一の選択肢ですか？アドバイスをいただければ幸いです。

    <div class="container-narrow" style="width:700px">
        <div class="content">
            <div class="row-fluid">
                <div class="span5">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Email:</label>
                            <div class="controls">
                                <input class="span12" size="50" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="span7">
                    <form class="form-horizontal" id="applies-Step1-form" action="/" method="post">
                        <div class="control-group">
                            <label class="control-label required" for="Step1_email">Thing1</label>
                            <div class="controls">
                                <input class="span12" size="60" maxlength="255" name="Step1[email]" id="Step1_email" type="text" />
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</body>

4

2 に答える 2

2

1 つのオプションは、フォームで .form-inline を使用して、フォーム要素を同じ行に配置できるようにすることです。

このようなもの：

<form class="form-inline">
    <label>Email:
        <input type="text" class="span1" name="email" />
    </label>
    <label>Thing1
        <input type="text" class="span3" name="thing1" />
    </label>
</form>

2 番目のラベルの前により多くのスペースが必要な場合は、カスタム CSS が必要になります。

于 2013-02-22T19:37:16.433 に答える