css - 以 Twitter Bootstrap 为中心的登录表单

Question

我正在使用 twitter bootstrap 3 并尝试将登录表单居中。

示例在这里 http://jsfiddle.net/0y848kf8/ .

形式是这样的

<div id="loginContainer" class="container">
    <h2>Sign in</h2>

    <form action="/www/sign/in" method="post" class="form-horizontal" id="frm-signInForm">               
        <div class="form-group"><label for="frm-signInForm-username" class=" control-label col-sm-2">Username:</label>
            <div class="col-sm-5"><input type="text" name="username" id="frm-signInForm-username" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Please enter your username.&quot;}]" value="" class="form-control"></div>                    
        </div>
        <div class="form-group"><label for="frm-signInForm-password" class=" control-label col-sm-2">Password:</label>
            <div class="col-sm-5"><input type="password" name="password" id="frm-signInForm-password" required="" data-nette-rules="[{&quot;op&quot;:&quot;:filled&quot;,&quot;msg&quot;:&quot;Please enter your password.&quot;}]" class="form-control"></div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-5">
                <input type="submit" name="send" id="frm-signInForm-send" value="Sign in" class="btn btn-default">
            </div>
        </div>
        <div><input type="hidden" name="do" value="signInForm-submit"></div>
    </form>
</div>

我很好奇为什么 pagination-center 类不能在 loginContainer 上工作以及为什么表单组有这么大的宽度。我认为使用 bootstrap 居中会很容易，但我必须犯一些错误。

Answer 1

这是一个使用 css 媒体查询将表单居中的基本使用场景。您最初有 div id="container-fluid" (您需要 class 而不是 id) 这是一个全 Angular 容器，因此您需要 div class="container" 使用 bootstrap 默认 css。

如果这有帮助，请告诉我。

input[type="text"],
input[type="password"],
.form-control {
  box-shadow: none;
  padding: 4px 0px 0px 10px;
  height: 40px;
  width: 100%;
  font-size: 16px;
  color: #33342e;
  border: 1px solid #1c1c1c;
  border-radius: 1px;
  line-height: 100%;
  -webkit-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#contact-form {
  padding: 15px 350px;
  color: #1c1c1c;
  font-size: 16px;
}
.btn-submit {
  color: #fff;
  background-color: #1c1c1c;
  border-color: #fff;
  width: 100%;
  height: 45px;
  font-size: 20px;
  font-weight: 500;
  margin: 5px 0px;
}
.btn-submit:hover {
  color: #F00;
  background-color: #FFF;
  border: 2px solid #1c1c1c;
}
@media (max-width: 992px) {
  #contact-form {
    padding: 15px 50px;
  }
}
@media (max-width: 480px) {
  #contact-form {
    padding: 15px 0px;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <form id="contact-form" name="contact-form" class="contact-form">
    <fieldset>
      <div class="row">
        <div class="col-lg-12 form-group">
          <h2>Sign In</h2>

          <label for="user">Username</label>
          <input class="form-control" type="text" value="" name="user" placeholder="Username" aria-required="true" />
        </div>
        <div class="col-lg-12 form-group">
          <label for="Password">Password</label>
          <input class="fom-control" type="text" value="" name="password" placeholder="Password" aria-required="true" />
        </div>
        <div class="col-lg-12 form-group">
          <input type="submit" class="btn btn-submit" />
        </div>
      </div>
      <!--end row-->
    </fieldset>
  </form>
</div>