css - Bootstrap 复选框对齐问题

Question

我正在使用标准的 Bootstrap 3 类来设置模态框的样式。我在复选框的对齐方面遇到了一些问题，我一直想不出如何解决它。

这是全 Angular 时的样子:

复选框没有完全与文本垂直居中对齐，如果能修复它会很好，但这不是我的主要问题。

从更窄的 Angular 来看，这是它的样子:

起初我以为这是我的代码中的某些东西，比如覆盖 Bootstrap 的样式，但我已将我的 html 复制到 bootply 中只使用标准的 Bootstrap 类，并且它的行为方式相同。

我的 CSS 没什么值得大书特书的；谁能帮帮我？

Answer 1

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

在输入类 .form-control 中设置为 width: 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