html - 随着浏览器尺寸变小，导航选项卡无法正确对齐

Question

我的主页上有导航选项卡。我的问题是当浏览器尺寸变小时，导航选项卡没有正确对齐。我尝试添加媒体查询来尝试解决这个问题，但没有多大帮助。

HTML:

<ul class="nav nav-tabs">
          <li class="active"><a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a></li>
          <li><a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
          <div class="tab-pane active in" id="home">
            <div class="row">
              <div class="well">
                <legend>
                  <h5>Login</h5>
                </legend>
                <form id="form-signin">
                  <input type="email" class="form-control" placeholder="Email address" required autofocus>
                  <input type="password" class="form-control" placeholder="Password" required>

                  <button class="btn main-button" type="submit">Submit</button>
                </form>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="profile">
            <div class="row">
              <div class="well">
                <legend>
                  <h5>Login</h5>
                </legend>
                <form id="form-register">
                  <input type="email" class="form-control" placeholder="Email address" required autofocus>
                  <input type="password" class="form-control" placeholder="Password" required>
                  <button class="btn main-button" type="submit">Submit</button>
                </form>
              </div>
            </div>

CSS:

html, body, .wrapper, {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

.form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.main-button {
  background-color: #374377;
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 10px;
}

.main-button:hover {
  color: #fff;
}

.wrapper {
  display: table;
  max-width: 500px;
  margin: 0 auto;
}

.container {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}

.nav-tabs {
  border-bottom: none !important;
  margin-left: -15px;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  background-color: #f5f5f5;
}

.nav-tabs li {
  background-color: #dcdcdc;
}

body .navbar {
  margin-bottom: 0;
}


/* Media Queries
-------------------------------------------------------------- */
@media only screen and (max-width: 479px) {
  .nav-tabs {
    margin-left: 110px;
  }
  .tab-pane {
    width: 200px;
    margin: 0 auto;
  }
}

JSFiddle Demo

Answer 1

您应该删除所有 row 类，并删除/重写 CSS 中试图补偿所有行的任何偏移量。

特别是这些规则:

.nav-tabs {
  margin-left: -15px;
}
.nav-tabs {
  margin-left: 110px;
}
.tab-pane {
  width: 200px;
  margin: 0 auto;
}

工作示例:

html,
body,
.wrapper,
.admin-wrapper {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.wrapper .form-signin {
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.wrapper .main-button {
  background-color: #374377;
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 10px;
}
.wrapper .main-button:hover {
  color: #fff;
}
.wrapper {
  display: table;
  max-width: 500px;
  margin: 0 auto;
}
.wrapper .main {
  display: table-cell;
  margin: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
.wrapper .nav-tabs {
  border-bottom: none !important;
}
.wrapper .nav-tabs > li.active > a,
.wrapper .nav-tabs > li.active > a:focus,
.wrapper .nav-tabs > li.active > a:hover {
  background-color: #f5f5f5;
}
.wrapper .nav-tabs li {
  background-color: #dcdcdc;
}
.wrapper .tab-content .tab-pane,
.wrapper .tab-content .well {
  margin: 0;
}
/* Media Queries
-------------------------------------------------------------- */

@media only screen and (max-width: 479px) {
  .wrapper .main {
    padding: 10px;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="main">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a>
      </li>
      <li><a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane active in" id="home">
        <div class="well">
          <legend>
            <h5>Login</h5>
          </legend>
          <form id="form-signin">
            <input type="email" class="form-control" placeholder="Email address" required autofocus>
            <input type="password" class="form-control" placeholder="Password" required>
            <button class="btn main-button" type="submit">Submit</button>
          </form>
        </div>
      </div>
      <div class="tab-pane fade" id="profile">
        <div class="well">
          <legend>
            <h5>Login</h5>
          </legend>
          <form id="form-register">
            <input type="email" class="form-control" placeholder="Email address" required autofocus>
            <input type="password" class="form-control" placeholder="Password" required>
            <button class="btn main-button" type="submit">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

使用绝对位置的工作示例:

html,
body {
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
.login-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 500px;
  width: 100%;
}
.login-wrapper .form-control {
  margin-top: 5px;
}
.login-wrapper .main-button {
  background-color: #374377;
  color: #fff;
  display: block;
  width: 100%;
  margin-top: 10px;
}
.login-wrapper .main-button:hover {
  color: #fff;
}
.login-wrapper .nav-tabs > li {
  margin: 0px;
}
.login-wrapper .nav.nav-tabs > li > a {
  background-color: #dcdcdc;
  border-radius: 0;
}
.login-wrapper .nav.nav-tabs > li.active > a,
.login-wrapper .nav.nav-tabs > li.active > a,
.login-wrapper .nav.nav-tabs > li.active > a:focus,
.login-wrapper .nav.nav-tabs > li.active > a:hover {
  background-color: #f5f5f5;
  box-shadow: none;
}
.login-wrapper .tab-content .tab-pane,
.login-wrapper .tab-content .well {
  border-radius: 0;
  margin: 0;
}
@media only screen and (max-width: 479px) {
  .login-wrapper {
    position: relative;
    max-width: 330px;
    width: 100%;
    padding: 10px;
  }
}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="login-wrapper">

  <ul class="nav nav-tabs">
    <li class="active">
      <a href="#home" data-toggle="tab"><i class="glyphicon glyphicon-user"></i> Login</a>
    </li>
    <li>
      <a href="#profile" data-toggle="tab"><i class="glyphicon glyphicon-pencil"></i> Register</a>
    </li>
  </ul>

  <div id="myTabContent" class="tab-content">

    <div class="tab-pane active in" id="home">
      <div class="well">
        <legend>
          <h5>Login</h5>
        </legend>
        <form id="form-signin">
          <input type="email" class="form-control" placeholder="Email address" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn main-button" type="submit">Submit</button>
        </form>
      </div>
    </div>

    <div class="tab-pane fade" id="profile">
      <div class="well">
        <legend>
          <h5>Register</h5>
        </legend>
        <form id="form-register">
          <input type="email" class="form-control" placeholder="Email address" required autofocus>
          <input type="password" class="form-control" placeholder="Password" required>
          <button class="btn main-button" type="submit">Submit</button>
        </form>
      </div>
    </div>

  </div>

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>