부트 스트랩 navbar 항목이 작은 화면에 제대로 정렬되지 않습니다.

부트 스트랩을 사용하여 navbar를 만듭니다. 대형 화면에서 내 페이지를 볼 때 완벽하게 작동합니다. 그러나 작은 화면으로 축소하려고하면 탐색 표시 줄의 키가 커지고 브랜드 아이콘과 이름이 왼쪽에 표시되고 오른쪽에있는 항목은 같은 줄에 표시되지 않습니다. 이 문제를 일으키는 HTML 또는 CSS 코드에 문제가 있습니까? 미리 감사드립니다. 여기 부트 스트랩 navbar 항목이 작은 화면에 제대로 정렬되지 않습니다.

내 HTML 코드입니다 : 여기

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container"> 
    <!-- Left side --> 
     <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="index.html"> 
       <span class="logo"><img src="logo_example.png"/></span> 
       <h4 class="navbar-text">My Website</h4> 
      </a> 
     </div> 

     <!-- Right side --> 
     <div class="collapse navbar-collapse" id="myNavbar"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Sign Up</i></a></li> 
       <li><a href="login.html">Login</i></a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

는 당신은 .navbar-brand 폭 1000px의 준

.navbar-brand { 
    margin: 0; 
    padding: 0; 
    width: 1000px; 
} 


.navbar-brand img { 
    max-height: 100%; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 

span img { 
    float: left; 
}

Here is an image of what I am talking about.

출처

2016-12-15 Mayakanai65