Erstellen Sie einen benutzerdefinierten Navigationsscroll auf mobilen Geräten bootstrap

Question

Ich habe eine benutzerdefinierte Navigationsleiste in einem div im mit Bootstrap. Ich möchte das Überlauf-X auf mobilen Geräten scrollen. Problem ist, dass ich die maximale Breite der Navigationsleiste auf dem mobilen Gerät beibehalten und scrollen möchte.

Ich möchte nicht die Li-Tags untereinander sein.

Ex: falscher Weg

Button 1

Taste 2

Button 3

Taste 4 so auf

korrekte Art und Weise

Button 1 | Taste 2 | Taste 3 | Taste 4 | so weiter und es auf mobilen Geräten

HTML

<div class="col-md-10"> 
     <ul class="my-nav"> 
     <li><a class="btn-nav tab-active" href="">Button 1</a></li> 
      <li><a class="btn-nav" href="">Button 2</a></li> 
      <li><a class="btn-nav" href="">Button 3</a></li> 
      <li><a class="btn-nav" href="">Button 4</a></li> 
      <li><a class="btn-nav" href="">Button 5</a></li> 
     </ul> 
</div> 

CSS

.my-nav { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
.my-nav li { 
    float: left; 
} 
.my-nav li a, .my-nav li a:link, .my-nav li a:visited { 
    color: #000; 
    font-size: 15px; 
} 
.my-nav li a:hover { 
    border-bottom: 4px solid #CCC; 
} 
a.btn-nav.tab-active, a.btn-nav.tab-active:visited, a.btn-nav.tab-active:hover { 
    color: #27a020; 
    border-bottom: 4px solid #27a020; 
} 
.btn-nav { 
    display: block; 
    text-align: center; 
    padding:15px 25px; 
} 

JSFiddle

Answer 1

EDIT

Um dies zu erreichen bewegen machen, können Sie eine Medien hinzufügen Abfrage für mobile wi dth mit einer overflow-x: scroll; Eigenschaft für die Eltern der Navigationsleiste:

@media (max-width: 640px){ 
    .parent { 
    overflow-y:hidden; 
    overflow-x:scroll; 
    } 
    .my-nav { 
    height: 70px; 
    width: 600px; 
    } 
} 

I volontary eine feste Breite angelegt, um die horizontalen Bildlaufwerke zu machen, aber man kann es mit einem Javascript-Skript berechnen, wenn Sie es vorziehen.

Get Informationen über die Gerätebreite:http://www.mydevice.io/devices/

Live example