포스 Navbar의 요소는 한 줄

Question

에서 나는 모든 폭에 한 줄 내 부트 스트랩 Navbar를에 숙박 요소를 wan't 유지합니다.

나는이 질문이 이미 several times과 다른 솔루션을 시도했지만 아무도 내 경우에 근무했습니다 물었다.

이 좋아

하지 : 내 Navbar를이 작은 화면에 다음과 같이 할

#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이 있습니다. 그것은 오타 인 경우 모르겠어요하지만 당신이 바로 떠 대신 .navbar-right의 .pull-right를 사용한다 : 당신은 768px에 중단 점은 그래서 당신이 white-space:nowrap

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

시 제거해야합니다 것입니다 파이어 폭스에서 또한

요소

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>