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

Answer 2

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

get()

可能重复：Center Form using Twitter Bootstrap

Answer 3

有几种方法可以解决这个问题，但我真的建议使用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使用“点”来了解哪些样式更相关，我建议检查Specifics on CSS Specificity

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

我希望这个答案有用：）

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

中心形式在bootstrap中

3 个答案: