如何在 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 的中央。我相信您已经尝试输入 bootstrap 中心 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 的弹性框 classes 通过仅将这些 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>

如何在 Bootstrap 4 中居中对齐表格？

How to center align a form in Bootstrap 4?

html

forms

bootstrap-4