Bootstrap菜单选项卡＆＃34; Jump＆＃34;在手机和平​​板电脑上

Question

我正在使用Bootstrap为客户开发菜单，但出于某种原因，当我在移动或平板电脑模式下点击某些标签时，标签会跳过＆＃34;跳过＆＃34;到列表中的另一个位置，并在选项卡之间留下一个丑陋的空间。我制作了一个.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;
}

Answer 1

我解决了我的问题。我是通过明确设置每个li的高度来实现的。

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

我认为我的问题是，当我点击每个li内的链接（专注于a标记）时，我认为所有li都会保持相同的高度。我知道在宽度和高度不同的元素上使用float属性可能会导致元素之间出现间隙，因此原始代码中的间隙和跳跃都很难看。