Question

似乎我要么正确地间隔或者水平或垂直堆叠。

Bootstrap还是新手，但我对目前为止所得到的内容非常满意。目前，我的登录表单为：

我希望以垂直方式堆叠我的联系方式。但这就是我最终的结果：

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

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

垂直放置模态窗口的内容

1 个答案: