Html bootstrap中的中心形式

我在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>

---

你可能想把它放在一个容器里。像这样：

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

    // Your code here

  </div>
</div>

//你的代码在这里

---

可能重复的：

您只需应用一些宽度，并使其位于

边距的中心：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>

---

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

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

<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使用“点”来了解哪些样式更相关，我建议检查

假设你想设计一个左右都有填充的样式，我会避免使用row或column元素，并会添加第二个container div来“尊重”引导样式

我希望这个答案有帮助：）

这里还有一个很好的答案：

更新：

---

使用boostrap 4.5^您可以使用父级上的

d-flex justify content center

将任何项目居中，如果您还想垂直对齐项目（相对于父级高度），只需添加

align items center

我假设“居中”是指每侧的边距相等？另外，如果您将其格式设置得更好，您会发现某些列嵌套不正确。您在html中使用了

id=“SignupCreate”

，在CSS中使用了

#SignupCreate

。案例需要匹配。由于某些原因，我的密码字段和标签仍然没有对齐到中心。

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

<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>