Bootstrap創建水平的按鈕列表，均勻間隔

Question

如何創建均勻間隔和均勻大小的按鈕的水平列表？

本質上，「導航欄」必須跨越整個屏幕頁面的85％。在導航欄內，五個按鈕必須填滿整個空間，它們之間的間距應該相等。

最後，如果屏幕尺寸小於786像素寬度，我想讓它們垂直堆疊。

Answer 1

Flexbox，就可以做到這一點：

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

我希望this one是你正在努力實現的。

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

它將聽起來很明顯，但你可以做的一切，與CSS。只需選擇合適的容器並根據需要塑造它們。所以如果你選擇li元素，例如你可以設置200px的寬度，並且它們都是相同的大小。你也可以使用簡單的.collapse類引導的，如果你要收集他們一個按鈕下或使用@media查詢，這樣做：

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