2016-04-17 35 views
2

浮動DIV我有一個接觸的形式和I'mm試圖風格它如此的ReCaptcha並提交左鈕花車,坐在下面的contact Number場像這樣在引導

enter image description here

的聯繫人號碼字段和您的消息字段都被設置爲在中型設備上佔用6列,但由於消息字段爲多行且具有gretaer高度,因此我想浮動在聯繫人號碼下方生成的區域中的回車符和提交按鈕。

這怎麼可能使用的引導嗎?可以做到嗎?

我的表單代碼如下

<!-- Contact section --> 
<section id="contact"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <h2 class="section-heading">Contact Us</h2> 
       <h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3> 
      </div> 
     </div><!-- /.row --> 
     <div class="row"> 
      <div class="col-lg-12"> 


<form action="/" enctype="multipart/form-data" method="post"> <fieldset> 
      <legend>Contact Form</legend> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="FullName">Full Name</label> 
       <input class="form-control" data-val="true" data-val-required="The Full Name field is required." id="FullName" name="FullName" placeholder="Full Name" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="FullName" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="Email">E-Mail</label> 
       <input class="form-control" data-val="true" data-val-email="The E-Mail field is not a valid e-mail address." data-val-required="The E-Mail field is required." id="Email" name="Email" placeholder="Email Address" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="ContactNumber">Contact Number</label> 
       <input class="form-control" data-val="true" data-val-email="The Contact Number field is not a valid e-mail address." id="ContactNumber" name="ContactNumber" placeholder="Contact Number" type="text" value="" /> 
       <span class="field-validation-valid" data-valmsg-for="ContactNumber" data-valmsg-replace="true"></span> 
      </div> 
     </div> 

     <div class="col-md-6"> 
      <div class="form-group"> 
       <label for="Message">Message</label> 
       <textarea class="form-control" cols="20" data-val="true" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Your Message" rows="2"> 
</textarea> 
       <span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span> 
      </div> 
     </div> 
     <div class="recaptcha col-md-6"> 
      <div class="g-recaptcha" data-sitekey="#"></div> 
      <span class="field-validation-valid" data-valmsg-for="Captcha" data-valmsg-replace="true"></span> 
      <input type="submit" id="submit" name="submit" value="Send Message" class="btn btn-primary btn-lg btn-block btn-biru"/> 
     </div> 
    </fieldset> 
    <script src="https://www.google.com/recaptcha/api.js" async defer></script> 
</form>     
      </div><!-- /.col-lg-12 --> 
     </div><!-- /.row --> 
    </div><!-- /.container --> 
</section> 

這裏是我的形式的小提琴如果它可以幫助你幫我:)

https://jsfiddle.net/cmstzmyv/

+0

你可以嘗試從右到右對齊所有元素而不是th默認左對齊。 – aeonsleo

+0

林不能確定你的這種做法意味着什麼對不起 – Paul

回答

2

你應該設置你的佈局有2列。 而不是Xcol-md-6,只要設置你的左手內容在第一col-xx-6右側的區域在另一col-xx-6

這裏是一個bootplyhttp://www.bootply.com/zXGGqQTe1A

HTML

  <form action="/" enctype="multipart/form-data" method="post"> <fieldset> 
        <legend>Contact Form</legend> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="FullName">Full Name</label> 
          <input class="form-control" data-val="true" data-val-required="The Full Name field is required." id="FullName" name="FullName" placeholder="Full Name" value="" type="text"> 
          <span class="field-validation-valid" data-valmsg-for="FullName" data-valmsg-replace="true"></span> 
         </div> 
         <div class="form-group"> 
          <label for="ContactNumber">Contact Number</label> 
          <input class="form-control" data-val="true" data-val-email="The Contact Number field is not a valid e-mail address." id="ContactNumber" name="ContactNumber" placeholder="Contact Number" value="" type="text"> 
          <span class="field-validation-valid" data-valmsg-for="ContactNumber" data-valmsg-replace="true"></span> 
         </div> 
        <div class="recaptcha"> 
         <div class="g-recaptcha" data-sitekey="#"></div> 
         <span class="field-validation-valid" data-valmsg-for="Captcha" data-valmsg-replace="true"></span> 
         <input id="submit" name="submit" value="Send Message" class="btn btn-primary btn-lg btn-block btn-biru" type="submit"> 
        </div> 
        </div> 
        <div class="col-md-6"> 
         <div class="form-group"> 
          <label for="Email">E-Mail</label> 
          <input class="form-control" data-val="true" data-val-email="The E-Mail field is not a valid e-mail address." data-val-required="The E-Mail field is required." id="Email" name="Email" placeholder="Email Address" value="" type="text"> 
          <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
         </div> 
         <div class="form-group"> 
          <label for="Message">Message</label> 
          <textarea class="form-control" cols="20" data-val="true" data-val-required="The Message field is required." id="Message" name="Message" placeholder="Your Message" rows="2">        </textarea> 
          <span class="field-validation-valid" data-valmsg-for="Message" data-valmsg-replace="true"></span> 
         </div> 
        </div> 
       </fieldset> 
       <script src="https://www.google.com/recaptcha/api.js" async="" defer=""></script> 
      </form>     
+0

嗨感謝這個它完美的作品:) – Paul

+1

歡迎你,請不要忘記接受的答案關閉帖子。 ++ – pbenard