Feste Navigationsleiste mit Doppelreihen?

Question

Ich möchte dem Benutzer 8 Optionen in einer Nav-Leiste anzeigen, ich möchte 2 Zeilen von 8 haben. Ich möchte, dass alle Optionen unten auf dem Bildschirm fixiert werden und der Benutzer alle 8 sehen kann jederzeit.

Im Moment ist meine zweite Reihe hinter meiner ersten versteckt?

.navbar-default { 
 
    font-family: "Roboto", sans-serif; 
 
    background: #f9f9f9; 
 
    margin: 0; 
 
    padding: 0; 
 
    border-top: none; 
 

 
    text-transform: uppercase; 
 
    -webkit-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -khtml-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -moz-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -ms-box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    box-shadow: 0 4px 0 0 rgba(0, 0, 0, 0.08); 
 
    -webkit-transition: all 0.25s ease-out; 
 
    -moz-transition: all 0.25s ease-out; 
 
    -ms-transition: all 0.25s ease-out; 
 
    -o-transition: all 0.25s ease-out; 
 
    transition: all 0.25s ease-out; 
 
} 
 

 
.navbar-default .navbar-nav > li > a { 
 
    margin: 0 20px; 
 
    padding: 10px 15px; 
 
    font-size: 14px; 
 
    text-transform: uppercase; 
 
    color: #D13030; 
 
    font-weight: 700; 
 
    letter-spacing: .02em; 
 
    -webkit-border-radius: 4px; 
 
    -khtml-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    -ms-border-radius: 4px; 
 
    border-radius: 4px; 
 
    -webkit-transition: all 0.2s ease-out; 
 
    -moz-transition: all 0.2s ease-out; 
 
    -ms-transition: all 0.2s ease-out; 
 
    -o-transition: all 0.2s ease-out; 
 
    transition: all 0.2s ease-out; 
 
} 
 

 
.navbar-default .navbar-nav > li > a:hover { 
 
    background-color: #E74C3C; 
 
    color: #f9f9f9; 
 
    outline: none; 
 
    -webkit-transition: background-color 0.15s linear; 
 
    -moz-transition: background-color 0.15s linear; 
 
    -ms-transition: background-color 0.15s linear; 
 
    -o-transition: background-color 0.15s linear; 
 
    transition: background-color 0.15s linear; 
 
}

<!-- NAVIGATION BAR --> 
 
    <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> 
 
    <div class="container text-center"> 
 
     <div class="row"> 
 
     <a href="about.html"> 
 
      <div class="col-sm-3" id="about-tab">About</div> 
 
     </a> 
 
     <a href="specifying.html"> 
 
      <div class="col-sm-3" id="about-tab">Specifying</div> 
 
     </a> 
 
     <a href="market-sectors.html"> 
 
      <div class="col-sm-3" id="about-tab">Market Sectors</div> 
 
     </a> 
 
     <a href="about.html"> 
 
      <div class="col-sm-3" id="about-tab">Shop</div> 
 
     </a> 
 
     </div> 
 
    </div>

Answer 1

Ich sehe nicht 8-Option in Ihrer navbar finden konnte, aber es am Ende der Seite zu platzieren Sie Code wie unten verwenden können. Fügen Sie diese in Ihrem navbar-default

.navbar-default { 
position:fixed; 
bottom:0; 
} 

Answer 2

Wenn ich Ihre Frage richtig verstanden, Sie wollen zwei Zeilen am unteren Rand der Seite richtig?

<div class="first-row"> 
    <button>menu1</button> 
    <button>menu2</button> 
    <button>menu3</button> 
    <button>menu4</button> 
</div> 
<div class="second-row"> 
    <button>menu5</button> 
    <button>menu6</button> 
    <button>menu7</button> 
    <button>menu8</button> 
</div> 

in der CSS:

.first-row{ 
    position:fixed; 
    height:50px; /*or anything you like*/ 
    bottom: 100px; 
} 
.second-row{ 
    position:fixed; 
    height:50px; /*or anything you like*/ 
    bottom: 50px; 
} 

Die zwei Reihen auf der Unterseite Ihrer Seite sein.