引導菜單選項卡移動設備和平板電腦上的「跳轉」

我使用Bootstrap爲客戶端開發菜單，但由於某種原因，當我在移動設備或平板電腦模式中單擊某些選項卡時，選項卡「跳轉」到另一位置該列表並在選項卡之間留下一個醜陋的空間。我做了一個.gif來展示我在說什麼。引導菜單選項卡移動設備和平板電腦上的「跳轉」

任何想法，爲什麼發生這種情況？我在下面包含了我自己的HTML和CSS。請記住我也使用Bootstrap CSS和JS。編輯：我認爲它可能不得不做一些浮動。

<ul class="nav nav-tabs" role="tablist"> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#waxing" role="tab"> WAXING </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#nail-art" role="tab"> NAIL ART </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#nail-enchancements" role="tab"> 
    <div class="hidden-xs"> NAIL ENCHANCEMENTS </div> 
     <div class="hidden-sm hidden-md hidden-lg hidden-xl"> NAIL ENH </div> 
     </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#children" role="tab"> FOR CHILDREN </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#vitamin-dip" role="tab"> VITAMIN DIPS </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#gel-services" role="tab"> GEL SERVICES </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#combo-services" role="tab"> COMBINATIONS </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" data-toggle="tab" href="#pedicure" role="tab"> PEDICURES </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link active" data-toggle="tab" href="#manicure" role="tab"> MANICURES </a> 
    </ul>

CSS

.nav-tabs{ 
    background-color:#fff; 
    border-radius: 3px 6px 0px 0px; 

} 

.nav-tabs > li { 
float: right; 
margin-bottom: -1px; 
background-color: #fff; 
margin:auto; 
} 

@media(max-width:992px){ 
    .nav-tabs > li { 
     width:50%; 
    } 
} 

.nav-tabs > li.active > a:focus, .nav-tabs > li.active { 
    border-bottom-style:none; 
    border-bottom-width: 0px; 
    background-color: #d3d3d3; 
    margin-bottom: -1px; 
} 

#menu-tabs .nav-link{ 
    font-weight: bold; 
    color: #000; 
    font-size: 0.8em; 
} 

#waxing li, #other li { 
    line-height: 23px; 
}

來源

2017-10-10 Alex Fidel Chen

我解決我的問題。我通過明確設定每個li的高度來做到這一點。

@media(max-width:992px){ 
    .nav-tabs > li { 
     height: 37px; 
     width:50%; 
     text-align:center; 
    } 
}

我想我的問題是，我認爲所有的li將保持相同的高度，當我點擊鏈接（重點a標籤）每個li內。我知道在不同寬度和高度的元素上使用float屬性可能會導致元素之間出現間隙，因此我的原始代碼中出現了難看的間隙和跳躍。

來源

2017-10-10 20:59:31

引導菜單選項卡移動設備和平板電腦上的「跳轉」

回答

相關問題