0

Ruby on Rails 4 と twitter ブートストラップを使用してform_for(twitter bs form_horizontal) を表示しています。以下のスタイリングは、レールが div 内の要素をラップするときに通常のフィールド (エラーではない) に対して正しく機能します (ラベル、入力、およびヒントが隣り合って表示されます) field_with_errors。 ただし、ヒントは入力要素の下にドロップされます。

<div class="control-group required">
        <div class="field_with_errors"><label class="control-label" for="lot_commonname_id">Common Name</label></div>
        <div class="controls">
            <div class="field_with_errors"><select id="lot_commonname_id" name="lot[commonname_id]"><option value="">Please select</option>
               <option value="1">x</option>
               <option value="2">y</option>
               <option value="3">z</option>
               </select>
            </div>
            <div class="hint">
               <a href="#" rel="tooltip" data-original-title="xyz test.">
               <i class="icon-info-sign"></i>
               </a>
            </div>
        </div>
</div>

.field_with_errors {
  @extend .control-group;
  @extend .error;
}

.form-horizontal .field_with_errors
{
 margin: 0;
}

.form-horizontal .field_with_errors:before, .form-horizontal .field_with_errors::after 
{
 display: block;
 clear: none;
}

次のjsfiddle http://jsfiddle.net/a78B5/6/は問題を示しています

4

1 に答える 1

0

Div はデフォルトで display:block に設定されるため、入力の下に自然にドロップダウンします。display:inline または display:inline-block を使用するスタイルを追加すると、テキスト ボックスの隣に戻ります。

于 2013-09-17T16:45:17.293 に答える