ブートストラップのNavbarボタンが積み重なるのを防ぐ方法

Question

レスポンシブルページをデザインしようとしています。

これは、ワイドブラウザーのようです。

これはffに変更されます。私が作るときには、狭い：

私は起こるしたい何がこれです：

は、これはそれのために私のコードです：私が見てきました

/**For Eample Only So the Icons are Visible*/ 
 

 
.navbar-ct-blue { 
 
    background: #1B96BF; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation"> 
 
    <div class="container"> 
 
    <ul class="nav nav-justified"> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-piggy" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-cash" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
     <li class="navbar-nav"> 
 
     <a href="#"> 
 
      <i class="pe-7s-wallet" style="color: white;"></i> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
</nav>

これらのリンクは、私は答えを見つけることができませんでした。助けてください。

How to prevent Bootstrap navbar from displaying in multiple lines without collapsing them into an icon

How to prevent a bootstrap navbar from collapsing when window resizing

Centering navbar buttons in bootstrap

Answer 1

あなたはnav-justifiedクラスのみ768px以上display:table-cellを使用していますので、これが起こる見ている：ここで

@media (min-width:768px) { 
.nav-justified > li { 
    display: table-cell; 
    width: 1% 
} 

はこれを解決する2つの例を示します。nav-justifiedを使用して

：

.navbar.navbar-ct-blue { 
 
    background: #1B96BF; 
 
    border: 1px solid #1B96BF; 
 
    max-height: 50px; 
 
    line-height: 30px; 
 
    margin: 0; 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li { 
 
    display: table-cell; 
 
    width: 1% 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li > a { 
 
    color: white; 
 
    font-size: 30px; 
 
} 
 
.navbar.navbar-ct-blue .nav-justified > li > a:hover { 
 
    color: #00F2FF; 
 
    background: none; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-ct-blue navbar-fixed-bottom" role="navigation"> 
 

 
    <div class="container"> 
 
    <ul class="nav nav-justified"> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-piggy"></span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-cash"></span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <span class="pe-7s-wallet"></span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</nav>

0グリッド使用

：

.navbar.navbar-ct-blue { 
 
    background: #1B96BF; 
 
    border: 1px solid #1B96BF; 
 
    margin: 0; 
 
} 
 
.navbar.navbar-ct-blue .nav-row span { 
 
    color: white; 
 
    padding: 20px 0; 
 
    font-size: 30px; 
 
} 
 
.navbar.navbar-ct-blue .nav-row span:hover { 
 
    color: #00F2FF; 
 
}

<link href="https://cdn.bootcss.com/pixeden-stroke-7-icon/1.2.3/dist/pe-icon-7-stroke.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-bottom navbar-ct-blue" role="navigation"> 
 

 
    <div class="container"> 
 
    <div class="row nav-row text-center"> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-piggy"></span></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-cash"></span></a> 
 
     </div> 
 
     <div class="col-xs-4"> 
 
     <a href="#"><span class="pe-7s-wallet"></span></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
</nav>

Answer 2

<li class="navbar-nav">を与えるには、明らかに間違っています。それを取り除くとそれを修正することができますさらに、Tasos氏はリスト項目のためにinline-blockと述べています。確かに、対応するメディアクエリを見てください。