當窗口調整大小時，防止引導程序3選項卡堆積（製作得更小）

我有兩個選項卡，我不希望它們在窗口大小調整時堆疊。我該怎麼做？如下所示，這是我用來創建我的選項卡的代碼。我不明白爲什麼他們會在我的窗口調整大小時疊加起來。當窗口調整大小時，防止引導程序3選項卡堆積（製作得更小）

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

來源

2015-06-22 iNeedHelp

的可能的複製[如何禁用引導的堆疊理由在小屏幕上的選項卡（http://stackoverflow.com/questions/22032136/how-to-disable-stacking-of-引導對齊的選項卡上小屏幕） – Aim

瀏覽器的寬度後，您的標籤擊穿內767px大小，這樣你就可以使用下面的CSS破解的浮動列表元素和佔據水平對齊。

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

Bootply

來源

2015-06-22 09:49:19

當窗口調整大小時，防止引導程序3選項卡堆積（製作得更小）

回答

相關問題