1. ホーム
  2. 質問と答え
  3. ブートストラップフォームグループレイアウトの破損

ブートストラップフォームグループレイアウトの破損

2016-09-20 12 views
0

ブートストラップを使用してフォームを作成しようとしていますが、レイアウトがSSNフィールドで破損しています。ブートストラップフォームグループレイアウトの破損

<div class="container"> 
    <div class="form-group"> 
     <label for="name" class="col-lg-2">2nd to Last Landlord Name:</label> 
     <div class="col-lg-4"> 
      <input class="form-control" name="name" id="name" type="text"> 
     </div> 
     <label for="name" class="col-lg-2">SSN (Social Secury Number):</label> 
     <div class="col-lg-4"> 
      <input class="form-control" name="name" id="name" type="text"> 
     </div> 
     <label for="name" class="col-lg-2">2nd to Last Landlord Phone:</label> 
     <div class="col-lg-4"> 
      <input class="form-control" name="name" id="name" type="text"> 
     </div> 
     <label for="name" class="col-lg-2">DOB:</label> 
     <div class="col-lg-4"> 
      <input class="form-control" name="name" id="name" type="text"> 
     </div> 
    </div> 
</div>

あなたが見ることができるhttp://www.bootply.com/swKZ6PT3Bfにこのコードを実行することSSNフィールドで休憩。

出典

2016-09-20 user6824563

+0

[mvce]（http://stackoverflow.com/help/mcve） –

+0

のように、これは最小限ではありません。これはフォームグループの使用方法ではありません。 'form-group'は、ラベル/入力の"セット "をラップします。通常は、フォームグループに1つの入力と1つのラベルを入れます。 'col-lg-X'は浮動小数点数を使用するので、浮動小数点型' col'要素を囲むためにform-group（s）は浮動小数点数をクリアするように意図されています。 –

+0

また、あなたのリンクを試してください。これは、あなたが構築したものではなく、空の/新しいbootplyです。 –

答えて

1

.form-groupは入力/ラベルの「行」をラップし、フォーム全体をラップしません。

cssフロートと、ブートストラップがどのように機能するかを調べる必要があります。 col-sm-xなどがfloat: leftを使用し、あなたのSSNフィールドは、物事を「壊す」された理由だった：
1.それは彼らに「ハング」のではなく、行くために要素を「浮いて」、その後の原因と他の要素
2より背が高いでした左いっぱい。

また、トラブルシューティングを行う必要があります。これではるかに小さな例ができたかもしれませんし、WORKING bootplyを保存しておく必要があります。

私が作成した、ここであなたのためbootply作業：のみこれを行うhttp://www.bootply.com/WcsaQNKdLq

NOTE .form-groupというときの内側の.form-horizontal：私はあなたのcontainer、などを保存するには、以下の編集したhttp://getbootstrap.com/css/#forms-horizontal

必要.form-horizontal

はそうのようなマークアップを変更し、次のとおりです

<!-- preserving the container you need --> 
<div class="container"> 
    <!-- adding the "form-horizontal". Note that this does NOT have to be a form element, but must have both form and form-horizontal classes --> 
    <form class="form form-horizontal"> 
     <div class="form-group"> 
      <h2>Apply Online</h2> 
      <hr> 
     </div> 
     <!-- Add a form-group here --> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Prospect First Name:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Last Residence:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <!-- since that was 12 "columns" of the grid, start a new form-group --> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Prospect Last Name:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Last Landlord Name:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Phone:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Last Landlord Phone:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Phone:</label> 
      <div class="col-lg-4"> 
       <select class="form-control"> 
        <option>ATT</option> 
        <option>Verizon</option> 
        <option>T-Mobile</option> 
       </select> 
      </div> 
      <label for="name" class="col-lg-2">2nd to Last Residence:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">eMail:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">2nd to Last Landlord Name:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">SSN (Social Secury Number):</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">2nd to Last Landlord Phone:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">DOB:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Current Employer:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Interest:</label> 
      <div class="col-lg-4"> 
       <select class="form-control"> 
        <option>option1</option> 
        <option>option2</option> 
        <option>option3</option> 
       </select> 
      </div> 
      <label for="name" class="col-lg-2">Current Employer Contact:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Lead Source:</label> 
      <div class="col-lg-4"> 
       <select class="form-control"> 
        <option>option1</option> 
        <option>option2</option> 
        <option>option3</option> 
       </select> 
      </div> 
      <label for="name" class="col-lg-2">Current Employer Phone:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Others On Lease:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Current Salary:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Previous Employer:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Previous Employer Contact:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="name" class="col-lg-2">Previous Employer Phone:</label> 
      <div class="col-lg-4"> 
       <input type="text" class="form-control" name="name" id="name"> 
      </div> 
      <label for="name" class="col-lg-2">Comments:</label> 
      <div class="col-lg-4"> 
       <textarea class="form-control" id="exampleTextarea" rows="3"></textarea> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label class="col-lg-2 control-label">Terms</label> 
      <div class="col-lg-10"> 
       <div style="border: 1px solid #e5e5e5; height: 200px; overflow: auto; padding: 10px;"> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
        <p>TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT 
         TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT</p> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <div class="col-xs-6 col-xs-offset-1"> 
       <div class="checkbox"> 
        <label> 
         <input type="checkbox" id="agree" name="agree" value="agree"/> Agree with the terms and conditions 
        </label> 
       </div> 
      </div> 
     </div> 
     <div class="form-group"> 
      <hr> 
      <div class="col-xs-6 col-xs-offset-3"> 
       <button id="applyApplication" name="applyApplication" type="button" class="btn btn-success center-block" 
         disabled>Submit Application 
       </button> 
      </div> 
     </div> 
    </form> 
</div>

注： form-groupごとに2つのラベル/入力セットをラップして、あなたのサイズからキューを取り出しました。ブートストラップは12列のグリッドの周りに設計されているので、2つのセット（ラベルは2ワイド、入力は4ワイド、ラベルは2ワイド）に加えて、 4ワイドです）。

必要に応じて、form-group divの列サイズや数/配置を調整できます。

出典

2016-09-20 23:13:18

+0

私はまだSSNフィールドで休憩を取っています。私はフォームグループ内に2つのセットをラップしました – user6824563

+0

div "コンテナ"を削除しても動作しますが、そのdivが必要です – user6824563

+0

リビジョンを参照してください。 '.form .form-horizo​​ntal'コンテナも必要です。 –

関連する問題

 関連する問題