2017-09-19 70 views
0

所以我正在開發一個網站使用引導4,一切工作正常,但我有列,需要自動浮動,但它沒有,是否有任何問題與引導4或我錯過了什麼, 因爲這可以解決太寫作自定義CSS,但我認爲我失去了一些東西,請幫助。引導4網格系統不會自動浮動

<?php 
include ("layouts/header.php"); 
?> 
<section class="booking"> 
    <div class="container"> 
     <div class="row"> 
      <div class="section-header"> 
        <h2>Booking Procedures</h2> 
       </div> 
      <div class="section-content"> 
       <div class="col-12"> 
        <form> 
         <div class="card text-center"> 
          <div class="card-header"> 
          Booking Step 2 Of 2 
          </div> 
          <div class="card-block"> 
          <p>All * fields are compulsory</p> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <select class="form-control"> 
             <option>Title</option> 
             <option>Mr.</option> 
             <option>Mrs.</option> 
             <option>Miss</option> 
            </select> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="First Name *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Middle Name" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Last Name *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <select class="form-control" required="required"> 
             <option>Nationality</option> 
             <option>Chinese</option> 
             <option>Indian</option> 
            </select> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control datepicker" placeholder="Date Of Birth *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Occupation" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="email" class="form-control" placeholder="Email Address *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Detail Mailing Address *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Mobile Number *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Landline" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Passport Number *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control" placeholder="Place Of Issue *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control datepicker" placeholder="Date Of Issue *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <input type="text" class="form-control datepicker" placeholder="Date Of Expiry *" /> 
           </div> 
          </div> 
          <div class="col-12 col-md-3"> 
           <div class="form-group"> 
            <select class="form-control" required="required"> 
             <option>How did you find us</option> 
             <option>Friends</option> 
             <option>Family</option> 
             <option>Online</option> 
             <option>Travel Blog</option> 
             <option>Trip Advisor</option> 
             <option>Others</option> 
            </select> 
           </div> 
          </div> 
          <div class="col-12"> 
           <div class="form-group"> 
            <textarea class="form-control" placeholder="Emergency Contact * "></textarea> 
           </div> 
          </div> 
          </div> 
          <div class="col-12"> 
          <p>Note: Please kindly note that you should be covered for, I- medical expenses, II- emergency air ambulance &amp; III- Trip cancellation to plan this trip.</p> 
          </div> 
          <div class="col-12"> 
           <div class="form-group"> 
            <button type="submit" class="btn btn-sample3">Submit</button> 
           </div> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 
<?php include("layouts/footer.php"); ?> 

結果,我想 enter image description here

結果我得到 result

+0

你知道BS4 **不使用浮動* *...對? –

+0

是嗎?我需要正確閱讀文檔...我的不好 – designerdarpan

+0

BS4基於Flexbox。 –

回答

2

您的代碼格式不正確,你正在使用同事同事無需使用row。你需要有類似的東西

<div class="container" > 
<div class="row"> 
<div class="col-12"> 
</div> 
</div> 
</div> 

,並有嵌套行使用此:

<div class="container" > 
<div class="row"> 
<div class="col-12"> 
<div class="row"> 
<div class="col-12"> 
</div> 
</div> 
</div> 
</div> 
</div> 

參考文檔: https://getbootstrap.com/docs/4.0/layout/grid/#nesting

+0

也沒有解決問題 – designerdarpan

+0

也許你可以與我們分享你想要的結果?所以我們清楚地看到問題 –