引导复选框对齐问题

Question

我使用标准引导程序3类来设置模式。我在复选框对齐方面遇到了一些问题，并且无法为我的生活弄清楚如何解决它。

这里是什么样子时，它的全宽：

复选框不是很对准中心垂直与文本，这将是很好的解决，但是这不是我的主要问题。

下面是它看起来像在一个狭义的观点：

起初我还以为是什么在我的代码，这样被重写引导一种风格，但我一直在使用复制我的HTML为bootply除了标准的引导类以外，它的行为方式都是一样的。

我的css没有什么可写的地方;谁能帮我？

Answer 1

你必须改变一些类。在表格中您有类form-inline。你必须摆脱那个类，因为所有元素都内联在一起。

在输入类.form-control设置为宽度：100％;默认情况下，所以你必须清理那个类。

HTML

<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="trialModal" class="modal fade in" style="display: block;"> 
<div class="modal-dialog modal-lg"> 
<div class="modal-content"> 
<div class="modal-header"> 
       <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button> 
<h4 class="modal-title">Free Trial!</h4> 
</div> 
<div class="modal-body"> 
<p style="display:none" id="confirm_message">Thanks for your interest in OurProduct.</p> 
<p style="display:none" id="error_message"></p> 
<form class=""> 
<div class="form-group"> 
         <label for="mail">Email</label><br><input placeholder="jane.doe@example.com" id="mail" class="form-control" type="email"></div> 
<div class="form-group"> 
    <input class="" id="agree_terms" value="1" type="checkbox">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>. 
        </div> 
</form> 
<div class="modal_privacy"> 
<h2>Terms and Conditions and Privacy Policy</h2> 
<p>We may send you information about our products and services and may contact you about new features or products in which we believe you may be interested. We also may use your contact information for marketing and other purposes. Although we do not currently rent, sell, or otherwise share your information with third parties for purposes unrelated to our products and services, we may do so in the future. If you do not want your information to be shared, you should contact us at <a href="mailto:support@ourproduct.com">support@ourproduct.com</a>. The supply of our products and services will not be conditional upon you consenting to the collection, use, or disclosure of personally identifiable information beyond that required to provide our products, services, or other related purposes.</p> 
</div> 
</div> 
<!-- create new form in block here. just email. call new module to send email and create user--><div class="modal-footer"> 
       <button id="email_link" class="btn btn-default" type="button">Email me a link</button><br><button id="download_trial_64" class="btn btn-default" type="button">Download 64-bit trial</button><br><button id="download_trial_32" class="btn btn-default" type="button">Download 32-bit trial</button><br><button id="working_link" class="btn btn-default" type="button" style="display: none"><span class="glyphicon glyphicon-refresh spinning"></span> Processing...</button> 
      </div> 
</div> 
<!--   /.modal-content --></div> 
<!--  /.modal-dialog --></div> 

DEMO HERE

Answer 2

作为<label>标签之间的良好UX实践和HTML语法，你应该把你的消息，真正把该框时你点击消息。

<div class="form-group"> 
    <input class="" id="agree_terms" value="1" type="checkbox"> 
    <label for="agree_terms">I confirm that I am over 13 years of age and agree to the <a id="modal_privacy_link">Terms and Conditions and Privacy Policy</a>.</label> 
</div>