浮動DIV我有一個接觸的形式和I'mm試圖風格它如此的ReCaptcha並提交左鈕花車,坐在下面的contact Number
場像這樣在引導
的聯繫人號碼字段和您的消息字段都被設置爲在中型設備上佔用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/
你可以嘗試從右到右對齊所有元素而不是th默認左對齊。 – aeonsleo
林不能確定你的這種做法意味着什麼對不起 – Paul