我有两个标签,我不希望它们在调整窗口大小时叠加。我该怎么办?如下所示,这是我用来创建标签的代码。我不明白为什么他们会在调整窗口大小时叠加。
HTML标签代码:
<div class="slContainer center-block">
<div class="panel panel-default">
<div class="row" id="formTab">
<div class="col-sm-12">
<div class="panel-body">
<div class="tabbable">
<ul class="nav nav-tabs nav-justified selected">
<li class="active"><a href="#tab1" data-toggle="tab">Sign-In</a></li>
<li><a href="#tab2" data-toggle="tab">Sign-Up</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<form class="form-horizontal">
<div class="form-group name-group">
<label for="name" class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Enter name"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<a href="#" class="btn btn-primary" role="button">Login</a>
</div>
</div>
</form>
</div><!--end of tab 1-->
<div class="tab-pane" id="tab2">
<form class="form-horizontal">
<p id="New">For New Individual's Only *</p>
<h1>Sign-up Requirements</h1>
<div class="form-group">
<label for="inputPassword" class="col-sm-3 control-label">Login Password*</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="inputPassword" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<label for="confirmPassword" class="col-sm-3 control-label">Confirm Password*</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Enter Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-9 col-sm-push-3">
<label class="radio-inline">
<input type="radio" name="ackRadio" value="option1" /> I have read and agreed to the <span id ="acknowledge"><a href="terms&condition.php">Terms and Conditions.</a></span>
</label>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<button type="register" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div><!--end of tab 2-->
</div><!--end of tab content-->
</div> <!-- end of tabbable-->
</div><!--end panel body-->
</div><!-- end of formTab -->
</div>
</div><!--end of panel container-->
</div><!-- end of container -->
CSS代码:
.slContainer{
margin-top: 60px;
margin-bottom:80px;
width: 60%;
}
答案 0 :(得分:1)
在767px内调整浏览器宽度后,您的标签会崩溃,因此您可以使用下面的CSS hack来浮动列表元素并占据水平对齐。
@media (max-width: 767px) {
.nav-tabs.nav-justified > li {
float: left;
width: 50%;
}
}