如何在 Bootstrap 容器中居中表单内容？-前端黑洞网

本站消息

站长简介/公众号

出租广告位,需要合作请联系站长

黑洞官方问答小能手

489336

文章

250654021

访问

+关注

分类

暂无分类

日期归档

暂无数据

如何在 Bootstrap 容器中居中表单内容？

发布于2022-10-12 02:55 阅读(881) 评论(0) 点赞(5) 收藏(1)

它在移动设备上看起来很棒，但是当网站以更大的屏幕尺寸呈现时，从所附图像中可以看出，主要表单内容（所有内容#form_content）都对齐到中心的左侧。

我尝试将诸如'justify-content-center',之类的属性'align-items-center' 'mx-auto'放在各种位置divs，但无法让该内容移动到大屏幕的中间！

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="p-5 container-fluid text-center" id="banner">
  <h1 class="display-1" id="title">Contact Us</h1>
  <img src="images/marine_divider1_lmbc_red.png" id="wheel" alt="divider"><br>
</div>

<section id="contact">
  <div class="container-fluid col-md-6 mx-auto mt-3 ">
    <form class="form" name="form" autocomplete="off" action="https://formsubmit.co/troy_a_w_easson@outlook.com" method="POST">

      <div class="mb-3" id="form_box">
        <label class="form-label" for="name" style="color: black; margin-bottom: 0px;">Name:</label>
        <input class="form-control" id="name" type="text" name="name" required style="max-width: 500px; margin-top: 0px;">
      </div>

      <div class="mb-3" id="form_box">
        <label class="form-label" for="email" style="color: black; margin-bottom: 0px">Email Address:</label>
        <input class="form-control" id="email" type="email" placeholder="e.g. name@example.com" name="email" required style="max-width: 500px; margin-top: 0px;">
        <div id="emailHelp" class="form-text">We'll never share your email with anyone else without your permission.</div>
      </div>

      <div class="mb-5" id="form_box">
        <label class="form-label" for="subject" style="color: black; margin-bottom: 0px">Subject:</label>
        <input class="form-control mb-2" id="subject" type="text" name="subject" style="max-width: 500px; margin-top: 0px;">
      </div>

      <div class="form-floating mb-5" id="form_box">
        <textarea id="query" class="form-control" name="message" spellcheck="true" style="height: 250px; overflow-y: visible; max-width: 500px"></textarea>
        <label for="query" class="textlab">Type your message here: <span class="tooltip" data-tooltip="Type your message here">?</span></label>
      </div>

      <div class="form-floating mb-5" id="form_box">
        <textarea id="query" class="form-control" name="mark" spellcheck="true" style="height: 100px; max-width: 500px"></textarea>
        <label for="query" class="textlab">How did you hear about us?<span class="tooltip" data-tooltip="Just a few words on how you found our website and heard about our club">?</span></label>
      </div>

      <div class="mb-5 text text-center">
        <button type="submit" id="conbtn" class="btn btn-danger btn-lg btn-block">Send Now!</button>
      </div>
    </form>
    <div class="container text-center mx-auto">
      <img src="images/controllertransp.png" id="controller" alt="divider"><br>
    </div>
  </div>
</section>

展开片段

这是我在本节中使用的相关外部 CSS：

section {
    width: 100%;
    position: relative;
    justify-content: center;
}

解决方案

你能改变HTML吗？最大的问题是您section不是 flex 父级，因此这些属性（justify-content、align-等）都不会影响子元素。

您可能要考虑的是在其中添加row元素container-fluid以及使用col类来包装表单。

另一个问题是您的表单字段（.form-control输入元素）有一个max-width使用内联样式的集合，因此在较大的屏幕上它们可能不会显示为居中，因为它们的宽度会比包含col元素的宽度短。

您可以删除该内联样式（如果不需要）以实现居中外观。我放入了自定义 CSS 来设置max-width: none !important以显示删除内联样式的影响。

.form-control {
  max-width: none !important/* override the inline style */
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="p-5 container-fluid text-center" id="banner">
  <h1 class="display-1" id="title">Contact Us</h1>
  <img src="images/marine_divider1_lmbc_red.png" id="wheel" alt="divider"><br>
</div>

<section id="contact">
  <div class="container-fluid">
    <!-- added this -->
    <div class="row">
      <!-- added this  the offset class adds the margin left the equivalent of the columns -->
      <div class="col-md-6 offset-md-3 col-lg-4 offset-lg-4">
        <form class="form" name="form" autocomplete="off" action="https://formsubmit.co/troy_a_w_easson@outlook.com" method="POST">

          <div class="mb-3" id="form_box">
            <label class="form-label" for="name" style="color: black; margin-bottom: 0px;">Name:</label>
            <input class="form-control" id="name" type="text" name="name" required style="max-width: 500px; margin-top: 0px;">
          </div>

          <div class="mb-3" id="form_box">
            <label class="form-label" for="email" style="color: black; margin-bottom: 0px">Email Address:</label>
            <input class="form-control" id="email" type="email" placeholder="e.g. name@example.com" name="email" required style="max-width: 500px; margin-top: 0px;">
            <div id="emailHelp" class="form-text">We'll never share your email with anyone else without your permission.</div>
          </div>

          <div class="mb-5" id="form_box">
            <label class="form-label" for="subject" style="color: black; margin-bottom: 0px">Subject:</label>
            <input class="form-control mb-2" id="subject" type="text" name="subject" style="max-width: 500px; margin-top: 0px;">
          </div>

          <div class="form-floating mb-5" id="form_box">
            <textarea id="query" class="form-control" name="message" spellcheck="true" style="height: 250px; overflow-y: visible; max-width: 500px"></textarea>
            <label for="query" class="textlab">Type your message here: <span class="tooltip" data-tooltip="Type your message here">?</span></label>
          </div>

          <div class="form-floating mb-5" id="form_box">
            <textarea id="query" class="form-control" name="mark" spellcheck="true" style="height: 100px; max-width: 500px"></textarea>
            <label for="query" class="textlab">How did you hear about us?<span class="tooltip" data-tooltip="Just a few words on how you found our website and heard about our club">?</span></label>
          </div>

          <div class="mb-5 text text-center">
            <button type="submit" id="conbtn" class="btn btn-danger btn-lg btn-block">Send Now!</button>
          </div>
        </form>
        <div class="container text-center mx-auto">
          <img src="images/controllertransp.png" id="controller" alt="divider"><br>
        </div>
      </div>
    </div>
  </div>
</section>