Bootstrap Erstellen Sie eine horizontale Liste von Schaltflächen, gleichmäßig verteilt

Question

Wie kann ich eine horizontale Liste von Schaltflächen erstellen, die gleichmäßig verteilt und gleichmäßig groß sind?

Im Wesentlichen muss die "navbar" 85% der gesamten Bildschirmseite umfassen. Innerhalb der Navigationsleiste müssen die fünf Schaltflächen den gesamten Bereich ausfüllen und der Abstand zwischen ihnen sollte gleich sein.

Schließlich möchte ich, dass sie vertikal gestapelt werden, wenn die Bildschirmgröße weniger als 786 Pixel breit wird.

Answer 1

Flexbox kann das tun:

nav { 
 
    width: 85%; 
 
    display: flex; 
 
    margin: auto; 
 
    justify-content: space-between; 
 
    border: 1px solid red; 
 
} 
 
a { 
 
    flex: 0 0 18%; 
 
    /* any width as long a % times number of items does not exceed 100% */ 
 
    height: 50px; 
 
    text-align: center; 
 
    background: #000; 
 
    color: white; 
 
    line-height: 50px; 
 
}

<nav> 
 
    <a href="#">Menu Item</a> 
 
    <a href="#">Menu Item</a> 
 
    <a href="#">Menu Item</a> 
 
    <a href="#">Menu Item</a> 
 
    <a href="#">Menu Item</a> 
 
</nav>

Answer 2

Ich hoffe this one ist, was Sie versuchen zu erreichen.

HTML

<nav> 

              <ul class="nav nav-justified"> 

                <li class="active"><a href="#">Home</a></li> 

                <li><a href="#">Projects</a></li> 

                <li><a href="#">Services</a></li> 

                <li><a href="#">Downloads</a></li> 

                <li><a href="#">About</a></li> 

                <li><a href="#">Contact</a></li> 

              </ul> 

</nav> 

CSS

.nav-justified { 

  background-color: #eee; 

  border: 1px solid #ccc; 

  border-radius: 5px; 

} 

.nav-justified > li > a { 

  padding-top: 15px; 

  padding-bottom: 15px; 

  margin-bottom: 0; 

  font-weight: bold; 

  color: #777; 

  text-align: center; 

  background-color: #e5e5e5; /* Old browsers */ 

  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5)); 

  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); 

  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); 

  background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%); 

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0); /* IE6-9 */ 

  background-repeat: repeat-x; /* Repeat the gradient */ 

  border-bottom: 1px solid #d5d5d5; 

} 

.nav-justified > .active > a, 

.nav-justified > .active > a:hover, 

.nav-justified > .active > a:focus { 

  background-color: #ddd; 

  background-image: none; 

  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15); 

          box-shadow: inset 0 3px 7px rgba(0,0,0,.15); 

} 

.nav-justified > li:first-child > a { 

  border-radius: 5px 5px 0 0; 

} 

.nav-justified > li:last-child > a { 

  border-bottom: 0; 

  border-radius: 0 0 5px 5px; 

} 


@media (min-width: 768px) { 

  .nav-justified { 

    max-height: 52px; 

  } 

  .nav-justified > li > a { 

    border-right: 1px solid #d5d5d5; 

    border-left: 1px solid #fff; 

  } 

  .nav-justified > li:first-child > a { 

    border-left: 0; 

    border-radius: 5px 0 0 5px; 

  } 

  .nav-justified > li:last-child > a { 

    border-right: 0; 

    border-radius: 0 5px 5px 0; 

  } 

} 

Answer 3

Es wird selbstverständlich klingen, aber Sie können mit CSS all das zu tun. Wählen Sie einfach die richtigen Behälter aus und formen Sie sie nach Ihren Wünschen. Wenn Sie zum Beispiel das Element li auswählen, können Sie eine Breite von 200px einstellen, und alle haben dieselbe Größe. Und Sie können einfach .collapse Klasse von Bootstrap verwenden, wenn man sie unter einem Knopf sammeln wollen oder @media Abfrage verwenden und so etwas wie:

@media only screen and (max-width: 768px) { 
    li { 
display: block; 
    } 
}