2015-11-01 27 views
0

看來我無法正確分隔空間或者水平或垂直堆疊東西。垂直地放置模態窗口的內容

Bootstrap還是個新手,但我對迄今爲止所獲得的結果感到非常滿意。目前我有這對我的登錄表單:

login form

我想提出我的聯繫形式以同樣的方式,垂直堆疊。但這裏是我結束了:

Contact Form

<div id="contact-modal" class="modal fade" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Contact me!</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Got any Feedback (Positive and/or Negative) or any ideas? Please let us know!</p> 
       <p>Your email is only used to contact you back with an answer. We will never spam your email (Promise!)</p> 
       <form role="form" class="navbar-form" action="" method="post"> 
        <span>Your Name</span> 
        <label for="contact-name" class="sr-only">Your Name</label> 
        <input type="text" id="contact-name" class="form-control" placeholder="Your Name" required> 
        <span>Your Email</span> 
        <label for="contact-email" class="sr-only">Your Email</label> 
        <input type="email" id="contact-email" class="form-control" placeholder="Your Email" required> 
        <span>Your Message</span> 
        <textarea id="contact-message" class="form-control" placeholder="Your message..." required></textarea> 
        <button type="button" class="btn btn-success btn-bg" id="contact-submit-btn"><span>Submit</span></button> 
       </form> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
    </div> 
</div> 

回答

1

使用form-groups。只要確保你包裝你的輸入<div class="form-group"></div>

<form role="form"> 
    <div class="form-group"> 
    <label for="email">Email address:</label> 
    <input type="email" class="form-control" id="email"> 
    </div> 
    <div class="form-group"> 
    <label for="pwd">Password:</label> 
    <input type="password" class="form-control" id="pwd"> 
    </div> 
    <div class="checkbox"> 
    <label><input type="checkbox"> Remember me</label> 
    </div> 
    <button type="submit" class="btn btn-default">Submit</button> 
</form> 
+0

哦,謝謝! :) – OmniOwl