引導複選框對齊問題

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>