내 메뉴 항목을 내 로고와 같은 줄에 두는 방법?

부트 스트랩 3을 사용하기 시작했으며 내 탐색 바에 100px 높이의 로고가 있습니다. 항목은 오른쪽에 있으며 ul (메뉴 항목을 세로로 가운데 맞추기)에 여백이 있습니다.내 메뉴 항목을 내 로고와 같은 줄에 두는 방법?

내 문제는 화면이 충분히 크지 않을 때 모든 메뉴 항목이 로고 아래에서 시작되며 로고와 동일한 줄에 최대한 많은 메뉴 항목을 넣고 싶습니다. 다음 http://jsbin.com/posigasile/2/edit?html,css,output

이 (내 작업 디렉토리에서) 더 나은 그림 : 여기에

내 문제를 설명하기 위해 시도하는 JS 빈입니다. 두 번째 이미지는 화면이 충분히 크고 첫 번째 이미지가 화면이 작을 때 발생하는 상황입니다. http://imgur.com/a/nFn1v

고맙습니다!

출처

2016-07-23 user6050469

이것은 내가 찾은 해결책이지만 가장 깔끔한 해결책은 아니지만 작동합니다.

트릭은 ul을 여러 개의 ul 블록으로 나누는 것입니다. 그냥 ul을 유지하면 코드 블록 하나로 취급되므로 화면 크기를 줄이면 전체 블록이 다음 줄로 전환됩니다.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Case</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 

 
<nav class="navbar navbar-inverse"> 
 
    <div class="container-fluid"> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">WebSiteName</a> 
 
    </div> 
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
</ul> 
 
<ul class="nav navbar-nav"> 
 
     <li class="dropdown"> 
 
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Page 1-1</a></li> 
 
      <li><a href="#">Page 1-2</a></li> 
 
      <li><a href="#">Page 1-3</a></li> 
 
      </ul> 
 
     </li> 
 
</ul> 
 
<ul class="nav navbar-nav"> 
 
     <li><a href="#">Page 2</a></li></ul> 
 
<ul class="nav navbar-nav"> 
 
     <li><a href="#">Page 3</a></li> 
 
</ul> 
 
<ul class="nav navbar-nav"> 
 
<li><a href="#">Page 3</a></li> 
 
</ul> 
 
<ul class="nav navbar-nav"> 
 
<li><a href="#">Page 3</a></li> 
 

 
</ul> 
 
<ul class="nav navbar-nav"> 
 
<li><a href="#">Page 3</a></li> 
 

 
</ul><ul class="nav navbar-nav"> 
 
<li><a href="#">Page 3</a></li> 
 

 
</ul><ul class="nav navbar-nav"> 
 
<li><a href="#">Page 3</a></li> 
 

 
</ul> 
 

 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li> 
 
     <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</nav> 
 
    
 
<div class="container"> 
 
    <h3>Collapsible Navbar</h3> 
 
    <p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window). 
 
    <p>Only when the button is clicked, the navigation bar will be displayed.</p> 
 
</div> 
 

 
</body> 
 
</html>

출처

2016-07-25 14:52:45

안녕! 이 답변을 주셔서 대단히 감사합니다. 이것이 내가 찾고 있었던 것입니다. 비록 그것이 아주 깨끗하지 않더라도, 그것은 트릭을 할 것입니다! 감사 ! – user6050469

내 메뉴 항목을 내 로고와 같은 줄에 두는 방법?

답변

관련 문제