当视口宽度大于768px

Question

我的导航栏里面有9个元素，当视口宽度小于768px时一切正常，但是当视口大于768px时它看起来像这样：

Image that show navbar http://imageshack.com/a/img537/967/vOZFCK.jpg

我的目标是让navbar-nav水平滚动，第六，第七和第八个元素必须与另一个元素一致，并且所有内容都必须可滚动。

效果类似于可见的here，所以我尝试实现Smooth Touch Scroll Jquery插件，在navbar-nav div之前添加<div id="TouchScroller"></div>，但没有任何反应。

请帮助我！

这里是Navbar Html代码

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
   <div class="navbar-inner">
    <div class="container"> 
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-lezard">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-brand">
                <a class="page-scroll" href="#page-top">
                    <h1>Lezard <span class="orange">Climb</span></h1>
                </a>
            </div>
        </div>

        <div class="collapse navbar-collapse" id="navbar-lezard">
            <div id="TouchScroller">
                <ul class="nav navbar-nav">
                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about"><span class="yellow">Chi siamo</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#dove"><span class="blu">Dove siamo</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contatti"><span class="green">Contattaci</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#attivita"><span class="orange">Attività</span></a>
                    </li>
                     <li>
                        <a class="page-scroll" href="#orari"><span class="violet">Orari</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#corsi"><span class="light-blu">Corsi di arrampicata</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#abbonamenti"><span class="red">Abbonamenti</span></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#staff"><span class="brown">Staff Lezard</span></a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                </ul>
            </div>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</div>
</nav>

CSS

＆＃13;

＆＃13;

.navbar{
    border-bottom: none !important;
    font-family: 'Amatic SC', cursive,helvetica,sans-serif;
    background-color: #000;
    padding: 0.5em;
    font-size: 2em;
}
@media screen and (min-width: 480px ) {
  .form-panel-width{
    width: 100%; 
    }
}
.navbar-brand{
    margin-top: -1.6em;
    margin-left: -0.7em;
}
.navbar-toggle{
    margin-top: 0.4em;
    margin-right: 0;
    background-color: #ff9900;
    border-color: transparent !important;
}
.navbar-toggle:active{
   background-color: #ff9900;
   border-color: transparent;
}
.icon-bar {
    background-color: #000 !important;
}
.navbar-nav > li{
    text-align: center;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background-color: transparent;
}
/*Fix Navbar element when height is too low */
@media screen and (max-height: 380px) and (max-width: 767px){
    .navbar-nav > li{
        margin-bottom: -0.4em;
    }
}

＆＃13;

＆＃13;

＆＃13;

＆＃13;

＆＃13;

@media screen and (min-width: 768px) and (min-height: 1024px){
    .navbar-nav{
        margin-top: 1.5em;
    }
    .navbar-brand{
        margin-left: 0;
    }
    .navbar-brand h1{
        font-size: 3em;
    }
    .navbar-nav a{
        font-size: 1.3em;
    }

}

＆＃13;

＆＃13;

＆＃13;