引导程序中的中心形式答案

【问题标题】：Center form in bootstrap引导程序中的中心形式
【发布时间】：2017-09-28 13:24:08
【问题描述】：

我在 Bootstrap 中将表单居中时遇到问题。我似乎也无法调整输入框的大小。我想让它居中。

这就是我所拥有的：

     <div class="form-group row" id="SignupCreate">
      <div class="col-sm-4">
    <label>Email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>

      <div class="col-sm-4">
    <label>Password</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
  <div class="col-sm-4">
      <button type="submit">Submit</button>
  </div>
    </div>
    </div>

对于 CSS，我开始了：

#SignUpCreate {
    padding-top: 200px;
    margin-right: 30px;
    margin-left: 30px;

}

【问题讨论】：

我假设“居中”是指每边的边距相等？此外，如果你更好地格式化它，你会发现你已经错误地嵌套了一些列。
您在 html 中使用 id="SignupCreate"，在 CSS 中使用 #SignUpCreate。案例需要匹配。

标签： html css twitter-bootstrap

【解决方案1】：

有几种方法可以解决这个问题，但我真的建议使用引导程序本身来解决。

我建议使用偏移量。因此，如果您希望表单居中，请使用以下内容：

<div class="form-group row" id="SignupCreate">
      <div class="col-sm-4 col-sm-offset-4">
      <label>Email</label>
      <input type="email" class="form-control" id="inputEmail" placeholder="Email">
      </div>

 <div class="col-sm-4 col-sm-offset-4">
    <label>Password</label>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    <div class="col-sm-4">
      <button type="submit">Submit</button>
    </div>
</div>
</div>

您可以相应地调整 xs、sm、md 和 lg 的偏移量，如果您不想在特定视图中偏移，请确保将偏移量设置为 0。

现在对于你的样式，你给 css 一个 SignUpCreate id 而实际上是 SignupCreate，记住 css 选择器是区分大小写的。

另外请记住，在使用 bootstrap 时，您应该尽可能地坚持框架并使用它的所有功能，而不是编写自己的 CSS，当您这样做时，要记住的一件好事是CSS使用“点”来知道哪些样式更相关，我建议检查Specifics on CSS Specificity

假设您想要设置左右填充的样式，我会避免使用行或列元素来执行此操作，并会添加第二个容器 div 以“尊重”引导样式。

我希望这个答案有帮助:)

这里也有很好的答案：Center a column using Twitter Bootstrap 3

更新：

使用 boostrap 4.5^，您可以使用 d-flex justify-content-center 在父项上居中任何项目，如果您还想垂直对齐项目（相对于父项的高度），只需添加 align-items-center。

【讨论】：

【解决方案2】：

您只需要应用一些宽度并使用margin: 0 auto 使其居中

<div class="form-group row" id="signupcreate">
        <div class="col-sm-4">
            <label>Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="col-sm-4">
            <label>Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="col-sm-4">
            <button type="submit">Submit</button>
        </div>
    </div>

下面的代码将使您的表单居中

#signupcreate{
  width: 60%;
  margin: 0 auto;
  float: none;
}

【讨论】：

由于某种原因，我的密码字段和标签仍未与中心对齐。

【解决方案3】：

您可能希望将其放入容器中。像这样：

<div class="container">
  <div class="row">

    // Your code here

  </div>
</div>

可能重复：Center Form using Twitter Bootstrap

【讨论】：