引导和 css 后按钮不对齐

Question

我创建了一个主菜单，您可以在其中登录和注册。它是用 bootstrap、css 和 html 创建的。除了最后一点，事情进展得很顺利。每当我将网页设为全屏时，登录和注册按钮都会一直滑到一边。移动版不这样做。 这是一个 JSFiddle 链接：https://jsfiddle.net/aetw5a4h/

带有 btn-login 和 btn-signup 类的按钮标签是我担心的，它们只是没有在中心对齐。

<button type="submit" class="btn btn-primary-login col-sm-offset-4 col-sm-4 btn-login" value="Log In">Log in</button>
            </div>
        </fieldset>
    </form>    

<div class="col-md-offset-2 col-md-8 text-center">
    <div class="container-fluid">       
        <div class="signup-form">
            <label class="create-label">Create an Account</label>
            <label class="or"><span>or</span></label>
        </div> <!-- signup-form -->
    </div> <!-- container-fluid -->
    <div class="container-fluid">
        <button class="btn btn-primary-login col-sm-offset-4 col-sm-4 btn-signup" ui-sref="signup">Sign Up Free</button>
    </div> <!-- container-fluid -->

这是他们的 css：

.btn-login {
    background-color: firebrick;
    font-family:Candara;
    font-size: 20px;
    color: white;
    padding: 10px;
    border: 1px solid firebrick;
    border-radius: 5px;
    box-shadow: 2px 4px 4px #330000;
    width: 200px;
    margin:auto;
    margin-top:70px;
    display:block;
}

.btn-signup {
    background-color: firebrick;
    font-family:Candara;
    font-size: 20px;
    color: white;
    padding: 10px;
    border: 1px solid firebrick;
    border-radius: 5px;
    box-shadow: 2px 4px 4px #330000;
    width: 200px;
    margin:auto;
    margin-top:-200px;
    display:block;
}

the issue

Answer 1

您并没有真正按照预期的方式使用网格。如果你按照他docs使用：

container
  row
    col-*-*

您的元素浮动不合适不会有任何问题。

工作示例：

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
  background-color: #d00025;
  background-image: url('https://unsplash.it/1200/900/?gravity=east');
  background-position: top;
  background-size: 50%;
  background-repeat: repeat-x;
  padding: 0px;
  margin: 0px;
  font-family: 'Candara', sans-serif;
  -webkit-font-smoothing: antialiased;
}
a {
  text-decoration: none;
}
.logo-login {
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  background-color: #fff;
  background-size: 170px auto;
  background-repeat: no-repeat;
  height: 200px;
  width: 200px;
  padding: 0px;
  border: 10px solid #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  z-index: 1;
}
.login-form {
  top: 90px;
  position: relative;
  box-sizing: border-box;
  margin: 25px auto;
  margin-bottom: 0px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 100px 50px 50px 50px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
}
.signup-form {
  top: -40px;
  position: relative;
  box-sizing: border-box;
  margin: 25px auto;
  margin-bottom: 0px;
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  padding: 50px 50px 50px 50px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  z-index: -1;
}
h1 {
  font-weight: bold;
  font-size: 35px;
  text-align: center;
  margin: 50px auto 50px auto;
}
.input-label {
  float: left;
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 100;
}
.create-label {
  text-align: center;
  margin-bottom: 10px
}
.or {
  text-align: center;
  margin-bottom: 20px;
  margin-top: 100px;
  width: 100%;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
}
.sub-section> span {
  background: #fff;
  padding: 0 10px;
}
.or > span {
  background: #fff;
  padding: 0 10px;
}
.form-control {
  background-color: #eee;
}
.btn.btn-login {
  background-color: firebrick;
  font-family: Candara;
  font-size: 20px;
  color: white;
  padding: 10px;
  border: 1px solid firebrick;
  border-radius: 5px;
  box-shadow: 2px 4px 4px #330000;
  width: 200px;
  margin: auto;
  margin-top: 70px;
  display: block;
}
.btn.btn-signup {
  background-color: firebrick;
  font-family: Candara;
  font-size: 20px;
  color: white;
  padding: 10px;
  border: 1px solid firebrick;
  border-radius: 5px;
  box-shadow: 2px 4px 4px #330000;
  width: 200px;
  margin: auto;
  margin-top: -200px;
  display: block;
}
.social_media {
  text-align: center;
  position: relative;
  margin-top: -75px;
}
.btn.btn-facebook {
  margin-bottom: 60px;
  padding-left: 30px;
  background-image: url(img/fb.gif);
  background-color: #3b5998;
  padding: 0px;
  border: 3px solid #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  background-size: contain;
  background-repeat: no-repeat;
  height: 70px;
  width: 70px;
  color: #fff;
}
.btn.btn-gmail {
  margin-bottom: 60px;
  top: 50%;
  padding-right: 30px;
  background-image: url(img/g+.gif);
  background-color: #dc4a38;
  padding: 0px;
  border: 3px solid #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 6px 5px 0px rgba(51, 51, 51, 1);
  background-size: contain;
  background-repeat: no-repeat;
  height: 70px;
  width: 70px;
  color: #fff;
}
.btn.btn-primary-login {
  color: #fff;
  background-color: #9e0b0f;
  border: none;
  box-shadow: 2px 4px 4px #330000;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
.btn.btn-primary-login:hover,
.btn.btn-primary-login:active,
.btn.btn-primary-login.hover {
  background-color: #84090D;
  border: none;
  box-shadow: 2px 4px 4px #330000;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}
/* styles for signup */

.uv-header {
  font-weight: bold;
  font-size: 35px;
  float: left;
  padding-left: 225px;
}
.sub-header {
  float: left;
  padding-left: 225px;
  margin-bottom: 5px;
  font-weight: 100;
  font-size: 15px;
}
.logo-signup {
  position: absolute;
  margin: 50px 0px 0px 50px;
  background-color: white;
  background-size: 170px auto;
  background-repeat: no-repeat;
  height: 170px;
  width: 170px;
  padding: 0px;
  border: 5px solid white;
  box-shadow: 1px 3px 2px grey;
  z-index: 1;
}
.signup-header {
  top: 110px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1000px;
  overflow: hidden;
  background-color: #fff;
  padding: 25px 50px 50px 50px;
  box-shadow: 1px 5px 2px #330000;
}
.signup-form2 {
  position: relative;
  box-sizing: border-box;
  margin: 25px auto;
  margin-bottom: 0px;
  width: 100%;
  max-width: 1000px;
  background-color: #fff;
  padding: 50px 50px 50px 50px;
  box-shadow: 1px 5px 2px #330000;
  z-index: 1;
  margin-bottom: 25px;
}
.btn.btn-facebook-signup {
  background-image: url(img/fb.gif);
  background-color: #3b5998;
  padding: 0px;
  border: 3px solid #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  height: 50px;
  width: 250px;
  padding-left: 40px;
  font-size: 16px;
  color: #fff;
}
.btn.btn-gmail-signup {
  background-image: url(img/g+.gif);
  background-color: #dc4a38;
  padding: 0px;
  border: 3px solid #fff;
  border-radius: 5px;
  -webkit-box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  -moz-box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  box-shadow: 0px 2px 5px 0px rgba(51, 51, 51, 1);
  margin: auto;
  background-size: contain;
  background-repeat: no-repeat;
  height: 50px;
  width: 250px;
  padding-left: 40px;
  font-size: 16px;
  color: #fff;
}
.social-btn-group {
  padding-left: 205px;
}
input[type="radio"] {
  margin: 0 10px 0 10px;
}
input[type="checkbox"] {
  margin-right: 20px;
}
.sub-section {
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  width: 100%;
  border-bottom: 1px solid #000;
  line-height: 0.1em;
}
.field-label {
  float: left;
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 100;
}
.radio-inline {
  margin-top: 20px;
}
.user-type {
  font-size: 75px;
}
.separator div:last-child {
  margin-bottom: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-md-offset-2 col-md-8 text-center" data-ng-controller="AuthenticationController">

      <form data-ng-submit="signin()" class="signin form-horizontal" autocomplete="off">

        <fieldset>
          <div class="container-fluid">
            <div class="row">

              <div class="col-xs-12">
                <div class="logo-login">
                  <img class="img-responsive" src="https://unsplash.it/350/350/?gravity=north">
                </div>

                <div class="login-form">
                  <h1>United Volunteers</h1>

                  <div class="form-group">
                    <label class="input-label">Username</label>
                    <input type="text" class="form-control" placeholder="Username" data-ng-model="credentials.username" name="username" id="username">
                  </div>

                  <div class="form-group">
                    <label class="input-label">Password</label>
                    <input type="password" class="form-control" placeholder="Password" data-ng-model="credentials.password" name="password" id="password">
                  </div>

                  <alert type="danger" data-ng-show="error" class="text-center text-danger">
                    <span data-ng-bind="error"></span>
                  </alert>
                </div>
              </div>

              <div class="col-xs-12 col-sm-offset-4 col-sm-4">
                <button type="submit" class="btn btn-primary-login btn-login" value="Log In">Log in</button>
              </div>

            </div>
          </div>
        </fieldset>

      </form>

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

          <div class="col-xs-12 col-md-offset-2 col-md-8 text-center">
            <div class="signup-form">
              <label class="create-label">Create an Account</label>
              <label class="or"><span>or</span>
              </label>
            </div>
          </div>

          <div class="col-xs-12 col-sm-offset-4 col-sm-4">
            <button class="btn btn-primary-login btn-signup" ui-sref="signup">Sign Up Free</button>
          </div>

          <div class="col-xs-12 col-sm-offset-4 col-sm-4">
            <div class="social_media">
              <a href="/oauth/facebook">
                <button class="btn btn-facebook"></button>
              </a>
              <a href="/oauth/google">
                <button class="btn btn-gmail"></button>
              </a>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
</div>

Answer 2

在http://getbootstrap.com/css/#grid 中，您可以找到以下层次结构：

1. 列是行的唯一子项
2. 行必须放置在容器或容器流体中

这意味着你必须使用这样的：

   <div class="container">
      <div class="row">
        <div class="col-md-6"></div>
      </div>
    </div>

也不要在按钮类中使用 col-*。您必须像上面的示例一样将它们分开。

当我在你的项目中使用这些指令时，“登录”按钮回到中心位置：

<div class="row">
  <div class="col-sm-offset-4 col-sm-4">
    <button type="submit" class="btn btn-primary-login btn-login" value="Log In">Log in</button>
  </div>
</div>