在Bootstrap 4中将表单与中心对齐[重复]

Posted 2023-03-05

【中文标题】在Bootstrap 4中将表单与中心对齐[重复]

【英文标题】：Align the form to the center in Bootstrap 4 [duplicate]

【发布时间】：2017-11-07 10:31:14

【问题描述】：

我正在尝试将表单与中心对齐并保持响应。我尝试了几种方法，但没有成功。我正在尝试将所有文​​本和表单居中。我正在使用 Bootstrap v4。我不确定这是否有帮助。

html：

<section id="cover">
     <div id="cover-caption">
         <div id="container">
             <div class="col-sm-10 col-sm offset-1">
                 <h1 class="display-3">Welcome to Bootstrap 4</h1>
                 <div class="info-form">
                 <form action="" class="form-inline">
                    <div class="form-group">
                        <label class="sr-only">Name</label>
                        <input type="text" class="form-control" placeholder="Jane Doe">
                    </div>
                    <div class="form-group">
                        <label class="sr-only">Email</label>
                        <input type="text" class="form-control" placeholder="[e-mail]">
                    </div>
                    <button type="submit" class="btn btn-success ">okay, go!</button>
                </form>
                </div>
                <br>

                <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">&darr;</a>
             </div>
         </div>
     </div>
 </section>

CSS：

html,
body
 height: 100%;


#cover 
  background: #222 url('../img/stars.jpg') center center no-repeat;
  background-size: cover;
  color: white;
  height: 100%;
  text-align: center;
  display: flex;
  align-items: center;

#cover-caption 
  width: 100%;

【问题讨论】：

这不是重复的，因为它仅与 Bootstrap 3 相关。

【参考方案1】：

您需要使用各种Bootstrap 4居中方法...

将text-center 用于内联元素。 对弹性框元素使用justify-content-center（即form-inline）

https://codeply.com/go/Am5LvvjTxC

另外，要偏移列，col-sm-* 必须包含在 .row 中，.row 必须在容器中...

<section id="cover">
    <div id="cover-caption">
        <div id="container" class="container">
            <div class="row">
                <div class="col-sm-10 offset-sm-1 text-center">
                    <h1 class="display-3">Welcome to Bootstrap 4</h1>
                    <div class="info-form">
                        <form action="" class="form-inline justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input type="text" class="form-control" placeholder="Jane Doe">
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Email</label>
                                <input type="text" class="form-control" placeholder="[e-mail]">
                            </div>
                            <button type="submit" class="btn btn-success ">okay, go!</button>
                        </form>
                    </div>
                    <br>

                    <a href="#nav-main" class="btn btn-secondary-outline btn-sm" role="button">↓</a>
                </div>
            </div>
        </div>
    </div>
</section>

【参考方案2】：

<div class="d-flex justify-content-center align-items-center container ">

    <div class="row ">


        <form action="">
            <div class="form-group">
                <label for="inputUserName" class="control-label">Enter UserName</label>
                <input type="email" class="form-control" id="inputUserName" aria-labelledby="emailnotification">
                <small id="emailnotification" class="form-text text-muted">Enter Valid Email Id</small>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="control-label">Enter Password</label>
                <input type="password" class="form-control" id="inputPassword" aria-labelledby="passwordnotification">

            </div>
        </form>

    </div>

</div>

【讨论】：

虽然这个代码块可能会回答这个问题，但最好能对它为什么这样做提供一点解释。请edit您的回答包含这样的描述。

谢谢，终于！

这个答案没有提供form-inline元素样式问题。

【参考方案3】：

以上所有答案都完美地提供了使用Bootstrap 4 使表单居中的解决方案。但是，如果有人想在没有任何其他样式帮助的情况下使用开箱即用的 Bootstrap 4 css 类并且不想要使用 flex，我们可以这样做。

示例表单

HTML

<div class="container-fluid h-100 bg-light text-dark">
  <div class="row justify-content-center align-items-center">
    <h1>Form</h1>    
  </div>
  <hr/>
  <div class="row justify-content-center align-items-center h-100">
    <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
      <form action="">
        <div class="form-group">
          <select class="form-control">
                    <option>Option 1</option>
                    <option>Option 2</option>
                  </select>
        </div>
        <div class="form-group">
          <input type="text" class="form-control" />
        </div>
        <div class="form-group text-center">
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 1
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio">Option 2
  </label>
          </div>
          <div class="form-check-inline">
            <label class="form-check-label">
    <input type="radio" class="form-check-input" name="optradio" disabled>Option 3
  </label>
          </div>
        </div>
        <div class="form-group">
          <div class="container">
            <div class="row">
              <div class="col"><button class="col-6 btn btn-secondary btn-sm float-left">Reset</button></div>
              <div class="col"><button class="col-6 btn btn-primary btn-sm float-right">Submit</button></div>
            </div>
          </div>
        </div>

      </form>
    </div>
  </div>
</div>

CodePen 链接

https://codepen.io/anjanasilva/pen/WgLaGZ

我希望这对某人有所帮助。谢谢。

【讨论】：

是的，它帮助了我！从我的角度来看，最清晰和最简单的答案。我不明白的一件事是 align-items-center 在这里做什么。没有那个我试过了，没有看到有什么不同。我认为 align-items-center 与垂直对齐有关，但我才刚刚开始使用这些东西。

嗨@AndyWeinstein。很高兴我的回答对你有所帮助。 align-items-center 垂直居中元素。你是对的：）你可以在这里找到更多信息：-developer.mozilla.org/en-US/docs/Web/CSS/align-items。快乐编码:)