このコードの出力(これを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>