複数のタブを1つのナビゲーションタブで追加する

Question

私はcssの新機能です.1つのナビゲーションタブに複数のタブを追加しようとしています。タブを追加すると、すべてのタブが1行に表示されるはずです。次の行には入ってはいけません。

<ul class="nav nav-tabs col-xs-12 userEditNav"> 
       <li class="col-xs-2 active"><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li> 
       <li class="col-xs-2"><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li> 
      </ul> 

https://jsfiddle.net/d15r8szq/

Answer 1

これを試してみてください。また

.nav-tabs { 
 
    display: inline-flex; 
 
} 
 

 
.nav-tabs li { 
 
    margin-right: 10px; 
 
    list-style-type: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<ul class="nav nav-tabs col-xs-12 userEditNav"> 
 
    <li><a data-toggle="tab" onclick="personalDetailsLoad()" href="#personalDetails"><span><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><span class="tabName">Personal Details</span></a></li> 
 
    <li><a data-toggle="tab" onclick="educationalDetailsLoad('educationalbackground')" href="#educationDetails"><span><i class="fa fa-book fa-2x" aria-hidden="true"></i></span><span class="tabName">Education Details</span></a></li> 
 
    <li><a data-toggle="tab" onclick="experienceDetailsLoad('priorExperience')" href="#experienceDetails"><span><i class="fa fa-laptop fa-2x" aria-hidden="true"></i></span><span class="tabName">Experience Details</span></a></li> 
 
    <li><a data-toggle="tab" onclick="familyDetailsLoad('familyDetails')" href="#familyDetails"><span><i class="fa fa-users fa-2x" aria-hidden="true"></i></span><span class="tabName">Family Details</span></a></li> 
 
    <li><a data-toggle="tab" onclick="documentsLoad()" href="#documents"><span><i class="fa fa-file fa-2x" aria-hidden="true"></i></span><span class="tabName">Documents List</span></a></li> 
 
    <li><a data-toggle="tab" onclick="" href=""><span><i class="fa fa-home fa-2x" aria-hidden="true"></i></span><span class="tabName">Communication Details</span></a></li> 
 
    <li><a data-toggle="tab" onclick="getOldPassword()" href="#changePassword"><span><i class="fa fa-key fa-2x" aria-hidden="true"></i></span><span class="tabName">Change Password</span></a></li> 
 
</ul>