如何在 Bootstrap 4 中居中對齊表單？

Question

我是 Bootstrap 的新手，我試圖將下面的表格居中，但目前它是左對齊的。 我怎樣才能做到這一點？

代碼示例：

<div class="row">
  <div class="col-md-6 col-sm-12 no-padding">
    <!-- START CONTACT FROM -->
    <div class="contact-from">
      <form action="assets/php/contact.php" method="post">
        <div class="form-group col-md-6">
          <input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required />
        </div>
        <div class="form-group col-md-6">
          <input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required />
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group col-md-12">
          <input type="text" name="subject" class="form-control" id="subject" placeholder="Enter Your Subject" />
        </div>
        <div class="form-group col-md-12">
          <textarea rows="6" name="message" class="form-control" id="message" placeholder="Enter Your Message" required></textarea>
        </div>
        <div class="col-md-12">
          <button>send message</button>
        </div>
      </form>
    </div>
    <!-- END CONTACT FROM -->
  </div>
</div>

Answer 1

如果我理解正確的話，您希望您的表單位於 div 的中心。 我相信您已經嘗試進入引導中心 class 甚至 html <center></center>標簽，但沒有做太多。 這可能是因為您的表單位於<div class="row">和<div class="col-md-6">中。 這所做的就是將表單保留在頁面的左側。 如果您希望保留行 class，請將其寫為

<div class="row justify-content-center">
        <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-sm-12">
            <!-- START CONTACT FROM -->
            <div class="contact-from">
                <form action="assets/php/contact.php" method="post">
                    <div class="form-group col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                            <input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required />
                            </div>
                            <div class="col-md-6">
                                <input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required />
                                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-12">
                        <input type="text" name="subject" class="form-control" id="subject" placeholder="Enter Your Subject">
                    </div>
                    <div class="form-group col-md-12">
                        <textarea rows="6" name="message" class="form-control" id="message" placeholder="Enter Your Message" required></textarea>
                    </div>
                    <div class="col-md-12">
                        <button>send message</button>
                    </div>
                </form>
            </div>
            <!-- END CONTACT FROM -->
        </div>
    </div>

Answer 2

您可以使用 Bootstrap 的 flex box 類通過僅將這些 class 添加到您的行 div 容器來使您的容器居中：

 justify-content-center

例子：

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" integrity="sha512-T584yQ/tdRR5QwOpfvDfVQUidzfgc2339Lc8uBDtcp/wYu80d7jwBgAxbyMh0a9YM9F8N3tdErpFI8iaGx6x5g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="row justify-content-center"> <div class="col-md-6 col-sm-12 no-padding "> <.-- START CONTACT FROM --> <div class="contact-from"> <form action="assets/php/contact.php" method="post"> <div class="form-group col-md-6"> <input type="text" name="name" class="form-control" id="name" placeholder="Enter Your Name" required /> </div> <div class="form-group col-md-6"> <input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email" required /> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group col-md-12"> <input type="text" name="subject" class="form-control" id="subject" placeholder="Enter Your Subject"> </div> <div class="form-group col-md-12"> <textarea rows="6" name="message" class="form-control" id="message" placeholder="Enter Your Message" required></textarea> </div> <div class="col-md-12"> <button>send message</button> </div> </form> </div> <!-- END CONTACT FROM --> </div> </div>