0
Ich habe Navigationsregisterkarten auf meiner Hauptseite. Mein Problem ist, dass die Navigationsregisterkarten nicht richtig ausgerichtet sind, wenn die Browsergröße kleiner wird. Ich habe versucht, eine Medienabfrage hinzuzufügen, um das Problem zu beheben, aber es hat nicht viel geholfen.Die Navigationsregisterkarten werden nicht richtig ausgerichtet, wenn die Browsergröße kleiner wird
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;
}
}