html - Bootstrap 中的中心表单

Question

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

}

Answer 1

你只需要应用一些宽度并使其居中 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;
}