1. 首頁
  2. 問答
  3. Bootstrap窗體組佈局破解

Bootstrap窗體組佈局破解

2016-09-20 52 views
0

我正在嘗試使用bootstrap創建窗體，但是我的佈局正在破解SSN字段。Bootstrap窗體組佈局破解

<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。 'form-group'包裝一組「標籤/輸入」 - 通常是一個form-group中的一個輸入和一個標籤。因爲'col-lg-X'使用了浮點數，所以form-group（s）用來包含浮動的'col'元素，以便清除浮點數（等等）。 –

+0

另外 - 嘗試你的鏈接。這是一個空的/新的bootply，而不是你自己構建的。 –

回答

1

.form-group旨在包裝輸入/標籤的「行」，而不是包裝整個表格。

你應該研究CSS浮點數，以及bootstrap的工作原理。 col-sm-x等使用float: left，和你的SSN字段是「破」的道理是：
1.它比其他元素
2.造成後續高「浮動」的元素在他們「掛起」，而不是去一直到左邊。

此外，您需要了解排除故障。你可以讓這個更小的例子，你可以（應該）保存一個工作引導程序。

我創建了一個在這裏bootply爲你工作：http://www.bootply.com/WcsaQNKdLq

注意的是.form-group不僅會在內部的.form-horizontal：http://getbootstrap.com/css/#forms-horizontal

我下面編輯爲保護您container，以及包括必要的.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>

備註： 我按照您的col尺寸提示，每form-group包裝了兩套標籤/輸入。由於引導程序是圍繞12列網格設計的，因此您希望包含這兩個集合（標籤爲2寬，加上4寬的輸入，加上2寬的標籤，以及輸入是4寬）。

您可以 - 根據需要 - 調整col尺寸或form-group divs的數量/位置。

來源

2016-09-20 23:13:18

+0

我仍然在SSN領域取得突破。我在表單組中包裝了兩套 – user6824563

+0

刪除了它的工作的div「container」，但我需要該div – user6824563

+0

請參閱修訂版。你還需要一個'.form .form-horizo​​ntal'容器。 –

相關問題

 相關問題