html - 调整窗口大小时(变小)防止 bootstrap 3 选项卡堆叠

Question

我有两个选项卡，我不希望它们在调整窗口大小时堆叠在一起。我该怎么做？如下所示，这是我用来创建选项卡的代码。我不明白为什么在调整窗口大小时它们会堆叠起来。

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%;
}

Answer 1

在浏览器宽度调整到 767 像素以内后，您的选项卡会崩溃，因此您可以使用下面的 CSS hack 来 float 列表元素并占据水平对齐方式。

@media (max-width: 767px) {
  .nav-tabs.nav-justified > li {
    float: left;
    width: 50%;
  }
}

Bootply