Schwimmdock div in Bootstrap

Question

Ich habe ein Kontaktformular und I'mm versucht es um Stil, so die recaptcha und legt Botton Schwimmer links und sitzt unter dem contact Number Feld wie so

Der Kontakt Nummernfeld und Ihr Nachrichtenfeld ist so eingestellt, dass es 6 Spalten auf> Medium-Geräten belegt. Da das Nachrichtenfeld jedoch aus mehreren Zeilen besteht und eine größere Höhe hat, möchte ich den Recaptcha- und Übergabeknopf in dem Bereich unter der Kontaktnummer erzeugen.

Wie ist das möglich mit Bootstrap bitte? Kann es gemacht werden?

Meine Form-Code ist wie folgt

<!-- 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> 

Hier eine Geige meiner Form, wenn es Sie mir helfen, hilft :)

https://jsfiddle.net/cmstzmyv/

Answer 1

Sie Ihr Layout 2 gesetzt sollte mit Säulen. Statt xcol-md-6, nur die linken Inhalte in einem ersten col-xx-6 und rechter Bereich eingestellt in einem anderen col-xx-6

Hier ist ein bootply: http://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>