0
我的主页上有导航选项卡。我的问题是，当浏览器尺寸变小时，导航选项卡未正确对齐。我尝试添加媒体查询来尝试帮助解决问题，但效果并不理想。由于浏览器尺寸变小，导航选项卡无法正确对齐
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;
}
}