中心登录表单Bootstrap [英] Centering Login Form Bootstrap

问题描述

我遇到了一些麻烦，集中我的Bootstrap登录表单。

I'm having some trouble centering my Bootstrap login form.

居中

我尝试过许多不同的方式来定位表单。整个div以col-md-offset类为中心，但我不明白如何使内容（表单输入）居中在div本身。对于文本我知道你可以使用文本对齐，对于内容我通常使用margin：0，auto;但是这不工作的形式。

I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.

I也希望垂直居中，如果可能，但考虑到我在互联网上研究，这似乎很难做到这一点，我没有发现在引导参考解释如何这样做。

I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.

另一个随机问题，是为什么在窗体上左角是直角，而右角是圆角？即使我改变角半径，也只会影响正确的角落。

Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.

CODE：

http://jsbin.com/gamufagehu/edit?html

推荐答案

如果要将表单放在屏幕中央，请使用 position：absolute 并且不使用网格。您可以使用媒体查询来控制其他因素，具体取决于您在较小或较大视口上最终需要什么。

If you want to place the form in the center of the screen then use position: absolute and don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.

此外，您还使用了输入-group （文档 ）没有真正有意义的，是你对输入有不利的样式（一个比另一个和 border-radius ）更短的原因。请改用 form-group 。

Also, you're use of input-group (Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-group instead.

.myForm {
  min-width: 500px;
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.5rem
}
@media (max-width: 500px) {
  .myForm {
    min-width: 90%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" id="logoText">Test</a>
    </div>
    <div class="collapse navbar-collapse">
      <form class="navbar-form navbar-right" method="post">
        <div class="form-group">
          <input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
        </div>
        <div class="form-group">
          <input type="password" class="form-control" name="loginpassword" placeholder="password" />
        </div>
        <input type="submit" name="submit" class="btn btn-default" value="Log In" />
      </form>
    </div>
  </div>
</div>

<div class="container">
  <form class="myForm" method="post">
    <div class="form-group">
      <label for="email">Email</label>
      <input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input class="form-control input-lg" type="password" name="password" placeholder="password" />
    </div>
    <div class="form-group">
      <input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
    </div>
  </form>
</div>

这篇关于中心登录表单Bootstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！