Question

目前我的导航导航标签正在被推到下一行，如果我让我的屏幕更小，但是我希望将它们保持在一条线上并在它们通过768px断点时启用overflow-x。我无法弄清楚如何使这项工作，任何人都可以帮忙吗？

HTML 的

<nav class="navbar navbar-fixed-top navbar-default">
    <div class="container">
        <div class="navbar-header">
            <div class="min-width" ng-if="user.loggedIn" id="char-nav" bs-scrollspy-list>
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="/#char-identity">Identity</a></li>
                    <li><a href="/#char-attributes">Attributes</a></li>
                    <li><a href="/#char-skills">Skills</a></li>
                    <li><a href="/#char-spells">Spells</a></li>
                    <li><a href="/#char-passives">Passives</a></li>
                    <li><a href="/#char-equipment">Equipment</a></li>
                    <li><a href="/#char-consumables">Consumables</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>

当前的css

#char-nav {
    border: none;
    margin-top: 13px;
}
.nav-tabs {
    border: none;
}
.nav > li > a {
    padding: 8px 15px;
}

@media screen and (max-width: 767px) {
    #char-nav {
        display: inline-block;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        max-width: 80%;
        margin-top: 0;
    }
}

Answer 1

这里有一点css ：

.min-width{ 
    overflow-x:auto 
}
ul.nav{
    display:inline-flex
}

和bootply ：http://www.bootply.com/BRqVaRNnZP

将导航项目保存在小型设备上的一行中

1 个答案: