ブートストラップ均等に配置されたボタンの水平リストを作成する

Question

均等に均等に均等に配置されたボタンの水平リストを作成するにはどうすればよいですか？

基本的に、「navbar」は画面ページ全体の85％に及ぶ必要があります。 navbar内では、5つのボタンがスペース全体を満たさなければならず、それらの間の間隔は等しくなければなりません。

最後に、画面サイズが786ピクセル未満になると、それらを垂直に積み重ねたいと思います。

Answer 1

フレキシボックスはそれを行うことができます。

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要素を選択した場合、200ピクセル幅を設定でき、すべて同じサイズになります。そして、あなたはボタンの下に集めるか、@mediaクエリを使用してのような何かをしたい場合は、ブートストラップのシンプルな.collapseクラスを使用することができます。

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