Prevent boot tab 3 from loading from stack on window resize (make it smaller)

I have two tabs and I don't want them to collapse when the window is resized. How should I do it? As shown below, this is the code I used to create my tabs. I don't understand why they fold up when my window is resized.

HTML code:

<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 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 code:

.slContainer{
  margin-top: 60px;
  margin-bottom:80px;
  width: 60%;
}

      

+3


source to share


1 answer


The breakdown of your tabs after browser width changes to within 767px, so you can use a CSS snapshot to position your list items and align horizontally.

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

      



Bootply

+1


source







All Articles