42

あいまいなタイトルで申し訳ありませんが、それをより適切に説明する方法がわかりませんでした。現在、Web サイトをブートストラップ 3 にアップグレードしていますが、1 つのフォーム行に複数の入力があると少し問題が発生します。

ブートストラップ 2 では、必要な列を作成するために、内部に要素を含む 2 つ.controls.controls-rowを作成するだけでした。ただし、これらはブートストラップ 3 で削除されたため、新しい列クラス.spanXに置き換えました。.form-group

フォーム内に 2 つの行 (この場合はフィールドセット) がある場合、2 番目の行が 1 列の行の場合、最初の行は編集できなくなります (以下のコードと添付のスクリーンショットを参照)。

firebug で要素を調べた.col-sm-12ところ、2 番目のフィールドセットの が の上に.form-groupあり、ユーザーが内部の要素をクリックできないことがわかりました。最初の最初のフィールドセットでは.col-sm-12、すべて正常に動作します。

.rowまた、問題を解決するそれぞれの周りに配置しようとしました.form-groupが、フォーム行の幅が広くなったため、フィールドセット内に左マージンがなくなりました。

フォーム行の幅を増やさずにこれを解決する方法はありますか?

前もって感謝します！

編集: 生成されたコードをjsFiddleとして追加しました

%fieldset
  %legend= t('.login_information')
  .form-group
    .col-sm-12
      = f.label :login
      = f.text_field :login, :class => 'form-control', :required => true

  .form-group
    .col-sm-6
      = f.label :password
      = f.password_field :password, :class => 'form-control'
    .col-sm-6
      = f.label :password_confirmation
      = f.password_field :password_confirmation, :class => 'form-control'

%fieldset
  %legend= t('.personal_details')
  .form-group
    .col-sm-4
      = f.label :title
      = f.text_field :title, :class => 'form-control'
    .col-sm-4
      = f.label :firstname
      = f.text_field :firstname, :class => 'form-control', :required => true
    .col-sm-4
      = f.label :lastname
      = f.text_field :lastname,  :class => 'form-control', :required => true

  .form-group
    .col-sm-12
      = f.label :email
      = f.text_field :email, :class => 'form-control email', :required => true

編集不可のフォーム要素

4

2 に答える 2

70

レイアウトで調整する必要があることがいくつかあります。

  1. col要素内に要素をネストしていform-groupます。これは逆にするform-group必要があります (要素内にある必要がありますcol-sm-xx)。

  2. rowデザインの新しい「行」ごとに常に div を使用する必要があります。あなたの場合、少なくとも 5 行 (ユーザー名、パスワードと会社名、役職/名/姓、電子メール、言語) が必要です。それ以外の場合、問題.col-sm-12は同じ行にあり、上記の 3 つ.col-sm-4の列の合計が 12 を超え、オーバーラップの問題が発生します。

これは修正されたデモです。

そして、問題のあるセクションの HTML がどうなるかの抜粋:

<fieldset>
    <legend>Personal Information</legend>
    <div class='row'>
        <div class='col-sm-4'>    
            <div class='form-group'>
                <label for="user_title">Title</label>
                <input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_firstname">First name</label>
                <input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
            </div>
        </div>
        <div class='col-sm-4'>
            <div class='form-group'>
                <label for="user_lastname">Last name</label>
                <input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
    <div class='row'>
        <div class='col-sm-12'>
            <div class='form-group'>

                <label for="user_email">Email</label>
                <input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
            </div>
        </div>
    </div>
</fieldset>
于 2013-08-25T12:50:25.927 に答える
15

.form-group が .col-*- n要素内にあることに同意しません。私の経験では、フォーム内で .row のような .form-group を使用すると、すべての適切なパディングが自動的に行われます。

<div class="form-group">
    <div class="col-sm-12">
        <label for="user_login">Username</label>
        <input class="form-control" id="user_login" name="user[login]" required="true" size="30" type="text" />
    </div>
</div>

このデモをご覧ください。

form タグに .form-horizo​​ntal を追加してデモを少し変更すると、パディングの一部が変更されます。

<form action="#" method="post" class="form-horizontal">

このデモをご覧ください。

疑わしい場合は、Chrome で検査するか、Firefox で Firebug を使用して、パディングやマージンなどを把握してください。フォーム内で .row を使用すると、edsioufi のフィドルで失敗します。これは、.row が負の左マージンと右マージンを使用するため、含まれるフィールドセットの境界を超えて .row クラスの div の水平境界を描画するためです。

于 2013-12-04T09:53:00.137 に答える