Question

这是我的代码：

<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Sign In</div>
            <div class="forget"><a href="#">Forgot password?</a></div>
        </div>

        <div class="panel-body" >
            <div id="login-alert" class="alert alert-danger col-sm-12"></div>
            <form id="loginform" class="form-horizontal" role="form">
                <!-- id / pw -->
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                </div>

                <div class="form-group">
                    <!-- Button -->
                    <div class="col-sm-12 controls">
                            <div class="row">
                                <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
                                <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
                            </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12 control">
                        <div class="signup">
                            Don't have an account?
                            <a href="#" id="signuplink">
                                Sign Up Here
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>  <!-- <div style="padding-top:30px" class="panel-body" > -->
    </div>
</div>

我唯一改变的是<div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">

这是在之前/之后：

在我插入col-md-6 col-md-offset-3之前，蓝色阴影框看起来很平衡。插入col-md-6 col-md-offset-3后，它看起来不平衡。

为什么会这样？我认为网格应该运行良好（登录框应该位于中心＆＃34;因为它意味着`3（偏移） - 6 - 3（偏移）＆＃39;。

需要你的帮助。

Answer 1

这是因为您的登录框总共没有12列，因为您指定了6 + 3（偏移）= 9

我建议这样，因为我不喜欢使用偏移

<div class="col-md-3 "></div>
<div id="loginbox" class="mainbox col-md-6">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Sign In</div>
            <div class="forget"><a href="#">Forgot password?</a></div>
        </div>

        <div class="panel-body" >
            <div id="login-alert" class="alert alert-danger col-sm-12"></div>
            <form id="loginform" class="form-horizontal" role="form">
                <!-- id / pw -->
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                    <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                </div>
                <div class="input-group">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                    <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                </div>

                <div class="form-group">
                    <!-- Button -->
                    <div class="col-sm-12 controls">
                            <div class="row">
                                <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
                                <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
                            </div>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-md-12 control">
                        <div class="signup">
                            Don't have an account?
                            <a href="#" id="signuplink">
                                Sign Up Here
                            </a>
                        </div>
                    </div>
                </div>
            </form>
        </div>  <!-- <div style="padding-top:30px" class="panel-body" > -->
    </div>
</div>
<div class="col-md-3 "></div>

Answer 2

这是我的看法：给它一个流体容器和一些额外的行来集中注意力：

<div class="container-fluid">
  <div class="row">
    <div class="brown-row col-md-8 col-md-offset-2">
      <div class="row">
        <div id="loginbox" class="mainbox col-md-6 col-md-offset-3 ">
          <div class="panel panel-info">
            <div class="panel-heading">
              <div class="panel-title">Sign In</div>
              <div class="forget"><a href="#">Forgot password?</a></div>
            </div>

            <div class="panel-body">
              <div id="login-alert" class="alert alert-danger col-sm-12"></div>
              <form id="loginform" class="form-horizontal" role="form">
                <!-- id / pw -->
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input id="login-username" type="text" class="form-control" name="username" value="" placeholder="username or email">
                </div>
                <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                  <input id="login-password" type="password" class="form-control" name="password" placeholder="password">
                </div>

                <div class="form-group">
                  <!-- Button -->
                  <div class="col-sm-12 controls">
                    <div class="row">
                      <a id="btn-login" href="#" class="btn btn-success col-xs-12"> Login</a>
                      <a id="btn-fblogin" href="#" class="btn btn-primary col-xs-12"><i class="icon-facebook"></i>Login with Facebook</a>
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-md-12 control">
                    <div class="signup">
                      Don't have an account?
                      <a href="#" id="signuplink">
                                Sign Up Here
                            </a>
                    </div>
                  </div>
                </div>
              </form>
            </div>
            <!-- <div style="padding-top:30px" class="panel-body" > -->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

和css：

body {
  background: #634a16;
}
.brown-row {
  background: #9e7623;
}
#loginbox {
  margin-top: 50px
}

Bootstrap网格系统工作奇怪

2 个答案: