如何在 Bootstrap 容器中居中显示窗体内容?

gc0ot86w  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(2)|浏览(270)

它在移动的设备上看起来很棒,但是当站点呈现在更大的屏幕尺寸上时,如所附图像所示,主表单内容(所有内容#form_content)与中心左侧对齐。
x1c 0d1x的数据
我试过在各种divs中放置'justify-content-center''align-items-center''mx-auto'等属性,但无法将内容移动到较大屏幕的中间!

<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;
}
6uxekuva

6uxekuva1#

最大的问题是您的section不是flex父元素,因此这些属性(justify-contentalign-等)都不会影响子元素。
您可能需要考虑在container-fluid中添加row元素,沿着使用col类 Package 表单。
另一个问题是表单域(.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>
pftdvrlh

pftdvrlh2#

您可以尝试将整个表单和页面上的其他元素放在一个容器中。这将有助于使所有内容居中。

相关问题