引导程序中的浮动div

Question

我有一个联系表单，我正在尝试对其进行样式设置，以便重新验证和提交按钮向左浮动并位于 contact Number 字段下方，就像这样

联系号码字段和您的消息字段都设置为 > 中型设备上的 6 列，但由于消息字段是多行并且具有更高的高度，我想在下面生成的区域中浮动 recaptcha 和提交按钮联系电话。

请问这怎么可能使用引导程序？能做到吗？

我的表单代码如下

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

Answer 1

您应该将布局设置为 2 列。 而不是 x col-md-6，只需将左侧内容设置在第一个 col-xx-6 中，将右侧区域设置在另一个 col-xx-6

这是一个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>