Css 引导复选框对齐问题

我使用标准的bootstrap3类来设计一个模态。我对复选框的对齐有一些问题，我一辈子都不知道如何解决它

下面是它全宽时的样子：

该复选框与文本的中心垂直方向不完全对齐，修复该复选框会很好，但这不是我的主要问题

下面是从更窄的角度看的情况：

起初我认为这是我代码中的某种东西，比如覆盖引导的样式，但我只使用标准引导类将html复制到了一个应用程序中，它的行为方式也是一样的

---

我的css没什么好写的；有人能帮我吗？

你得换几门课。在表单中，类

forminline

。您必须摆脱该类，因为所有元素都是内联的

在输入中，类

。窗体控件
设置为宽度：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>


×
免费试用！
感谢您对我们的产品感兴趣


电子邮件

本人确认本人已年满13岁，并同意以下条件：。我们的产品和服务的提供不以您同意收集、使用或披露个人身份信息为条件，这些信息超出了提供我们的产品、服务或其他相关目的的要求

通过电子邮件向我发送链接
下载64位试用版
下载32位试用版
处理。。。



作为一种良好的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>


本人确认本人已年满13岁，并同意条款和条件以及隐私政策。
原来是这样的；为了测试的目的，我去掉了标签，看看这是否有助于对齐。没有。