2017-04-24 97 views
0

兩列使用自舉4阿爾法6需要12柱形式,分割成6

我有一個應該是這樣的一個接觸的形式:

enter image description here

使用下面的代碼,我能夠得到兩列6,但這些字段都是錯誤的。這是部分代碼:

<section id="contact"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
       <h2>Contact Us</h2> 
       <hr width="30%"> 
       <p>Need to get in touch? Fill in the form below for more information</p> 
      </div> 
     </div> 
     <div class="row"> 
      <form class="form-inline col-md-12" role="form"> 
       <div class="col-md-6"> 
        <fieldset class="form-group"> 
         <input type="email" class="form-control" id="email" placeholder="email..."> 
        </fieldset> 
        <fieldset class="form-group"> 
         <input type="text" class="form-control" id="name" placeholder="name..."> 
        </fieldset> 
        <fieldset class="form-group"> 
         <input type="text" class="form-control" id="subject" placeholder="subject..."> 
        </fieldset> 
       </div> 
       <div class="col-md-6"> 
        <fieldset class="form-group"> 
         <textarea name="" id="message" rows="3" class="form-control" placeholder="message..."></textarea> 
        </fieldset> 

        <button type="submit" class="btn btn-outline-info btn-block">Submit</button> 
       </div> 
      </form> 
     </div> 
    </div> 
</section> 

這是形式的樣子與上面的代碼:

enter image description here

正如你所看到的,列正常分裂,但字段沒有填充整個列的寬度。我在firebug中查看了它,它顯示了寬度爲auto的form-inline類。

.form-inline .form-control { 
    display: inline-block; 
    vertical-align: middle; 
    width: auto; 
} 

如果我關閉寬度:auto;在firebug中,那麼控件將填充六列的全部寬度。我可以通過添加一個新類,這樣做在我自己的樣式表解決這個問題:

.contact-control 
{ 
    width: 100% !important; 
} 

我只是想知道是否有更好的方式來做到這一點,在引導使用現有的類。

回答

2

我認爲它應該更好地使用與類form-group而不是fieldset.I希望這可能有所幫助。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <!-- Required meta tags --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 

    <!-- Bootstrap CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    </head> 
    <body> 
    <section id="contact"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-lg-12"> 
        <h2><b>Contact Us</b></h2> 
        <hr width="30%"> 
        <p>Need to get in touch? Fill in the form below for more information</p> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Name"> 
        </div> 
        <div class="form-group"> 
         <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject"> 
        </div> 
       </div> 
       <div class="col-lg-6"> 
        <div class="form-group"> 
         <textarea type="text" class="form-control" id="subject" rows="4" aria-describedby="emailHelp" placeholder="Subject" ></textarea> 
        </div> 
        <button type="submit" class="btn btn-outline-info btn-block">Submit</button> 
       </div> 
      </div> 
     </div> 
    </section> 
    <!-- jQuery first, then Tether, then Bootstrap JS. --> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
    </body> 
</html> 
+0

完美!謝謝。 –

0

我的情況,如果你添加表單標籤,它不工作。我在這裏有很好的例子,用任何CSS

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <h4 class="heading">Utvärderingsformulär RETTS Nära Pilot - (Tranås VC)</h4> 
     <hr> 
     </div> 
    </div> 
    <form id="datainsamlingForm" method="POST" target="no-targer"> 
     <div class="row"> 
     <div class="col-md-6"> 
      <label class="control-label">App version number</label> 
      <select class="form-control"> 
       <option>Version 1</option> 
       <option>Version 2</option> 
       <option>Version 3</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="control-label">Push Message</label> 
       <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p> 
       <input type="text" class="form-control" id="inputSuccess1"> 
      </div> 
     </div> 
     </div> 
     <hr> 
     <div class="row"> 
     <div class="col-md-6"> 
      <label class="control-label">Content</label> 
      <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p> 
      <select class="form-control"> 
       <option>Offer 1</option> 
       <option>Offer 2</option> 
      </select> 
     </div> 
     <div class="col-md-6"> 
      <label class="control-label">Play sound</label> 
      <p class="help-block"><small>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</small></p> 
      <select class="form-control"> 
       <option>Sound 1</option> 
       <option>Sound 2</option> 
       <option>Sound 3</option> 
      </select> 
     </div> 
     </div> 
     <div class="row"> 
     </div> 
     <hr> 
     <div class="row"> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="control-label">Publish date/time</label> 
       <div class="input-group date" id="datetimepicker1"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label class="control-label">Expire date/time</label> 
       <div class="input-group date" id="datetimepicker1"> 
        <input type="text" class="form-control"> 
        <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> 
       </div> 
      </div> 
     </div> 
     </div> 
     <hr> 
     <div class="row"> 
     <div class="col-md-3"> 
      <h2> 
       <a type="button" class="btn btn-custom btn-lg">Publish</a> 
      </h2> 
     </div> 
     </div> 
     <hr> 
    </form> 
</div>