Navbarの要素が1行に収まるようにします。

Question

私の要素はありません。ブートストラップNavbar〜は、1行に1つの行に残りますすべての幅で。

私はこの質問が既に尋ねられていることを知っていますseveral timesと私は様々な解決策を試みましたが、誰も私の場合に働いていません。ここで

は私のコードです：

#head-navbar { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
.nav>li { 
 
    display: inline-block; 
 
    white-space: nowrap; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a class="#" href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Page 1</a> 
 
    </li> 
 
    <li><a href="#">Page 2</a> 
 
    </li> 
 
    </ul> 
 
    <ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#">DE</a> 
 
    </li> 
 
    <li><a href="#">IT</a> 
 
    </li> 
 
    </ul> 
 
</nav>

私は私のナビゲーションバーが小さな画面上で次のようになりたい：このような

ない：

Answer 1

にdisplay: inline-block;を追加すると、インラインで表示されます。

.nav>li { 
    display: inline-block; 
} 

また、あなたがul elements.Hereに同じことを行うことができ、同じ行に両方ulを表示したい場合は、両方のulインラインのjsfiddleを持っています。それはTYPOある場合、私は知らないが、あなたが正しい浮かぶように.pull-rightの代わり.navbar-rightを使用する必要があります。

はまた、Firefoxであなたはとてもあなたがwhite-space:nowrap

#head-navbar { 
    white-space: normal; 
} 

Psのを削除する必要があり768pxにブレークポイントを持っています要素

Answer 2

メディアクエリのため、小さい画面ではスタイルが変更されます。ただ、これらを追加します。

.navbar-nav { 
    float: right; 
    margin: 0; 
    } 
    .navbar-nav > li { 
    float: right; 
    } 

Answer 3

.pull-right{ 
 
    float:right; 
 
    } 
 
#head-navbar { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
.nav>li { 
 
    display: inline-block; 
 
    width:initial; 
 
    float:left; 
 
    white-space: nowrap; 
 
} 
 
.nav { 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width:768px) 
 
{

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a class="#" href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Page 1</a> 
 
    </li> 
 
    <li><a href="#">Page 2</a> 
 
    </li> 
 
    </ul> 
 
    
 
    <ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#">DE</a> 
 
    </li> 
 
    <li><a href="#">IT</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 4

これはあなたのために働く必要があり、以下のCSSを追加します。

#head-navbar { 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
    overflow: hidden; 
 
} 
 
.nav>li { 
 
    display: inline-block; 
 
    width:initial; 
 
    float:left; 
 
    white-space: nowrap; 
 
} 
 
.nav { 
 
    display: inline-block; 
 
} 
 

 
@media screen and (max-width:768px) 
 
{ 
 
    .nav.navbar-nav.pull-right { float:none !important; } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-inverse navbar-fixed-top navbar-collapse" id="head-navbar"> 
 
    <ul class="nav navbar-nav"> 
 
    <li><a class="#" href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">Page 1</a> 
 
    </li> 
 
    <li><a href="#">Page 2</a> 
 
    </li> 
 
    </ul> 
 
    
 
    <ul class="nav navbar-nav pull-right"> 
 
    <li><a href="#">DE</a> 
 
    </li> 
 
    <li><a href="#">IT</a> 
 
    </li> 
 
    </ul> 
 
</nav>