Bootstrap复选框对齐问题

Question

我正在使用标准的Bootstrap 3类来设置模态。我在复选框的对齐方面遇到了一些问题，并且在我的生活中无法弄清楚如何修复它。

以下是全宽时的样子：

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

以下是狭义视图的样子：

起初我认为这是我的代码中的某些东西，就像一个覆盖Bootstrap的样式，但我已经使用标准引导类将我的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

作为良好的用户体验练习和 HTML 语法，您应该在<label>标记之间插入消息，以便在单击消息时实际选中该框。

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