부트 스트랩 응답 성 Navbar가 제대로 작동하지 않습니다.

Question

Here's a screenshot of the exact responsive navbar I'm trying to achieveA screenshot of the navbar on fullscreenA screenshot of the navbar on mobile size screen 응답 성이 좋은 nav-bar/header를 제대로 작동 시키려고했지만 헤더에 나열된 항목이 아이콘을 클릭하면 페이지 주위에 흩어져있는 것처럼 보입니다. 내가 모바일 화면에서 메뉴를 표시합니다.

좀 더 설명하려면 다음과 같이 navbar를 수행하고 싶습니다. https://house.jumia.com.ng/. 어떤 도움을 주시면 감사하겠습니다. 여기에 내 코드입니다 : 내가 부트 스트랩 문서쪽으로 당신의 코드를 보면서 비교

.navbar-custom { 
 
\t \t background-color:#36b; 
 
\t \t color:#ffffff; 
 
\t \t border-radius:0; 
 
\t \t height:68px; 
 
\t \t margin-bottom: 0; 
 
\t } 
 
\t \t \t 
 
.navbar-custom .navbar-nav > li > a { 
 
\t \t color:#fff; 
 
\t \t text-align: center; 
 
\t \t padding-left: 0; 
 
\t \t padding: 25px 0 75px 0; 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t font-weight:300; 
 
\t \t font-size:13px; 
 
\t } 
 
\t \t \t 
 
.btn { 
 
\t \t box-sizing: border-box; 
 
\t \t appearance: none; 
 
\t \t background-color: transparent; 
 
\t \t border: 2px solid #e74c3c; 
 
\t \t border-radius: 0.6em; 
 
\t \t color: #e74c3c; 
 
\t \t cursor: pointer; 
 
\t \t align-self: center; 
 
\t \t font-size: 12px; 
 
\t \t font-weight: 600; 
 
\t \t line-height: 1; 
 
\t \t margin: 20px; 
 
\t \t padding: 1.2em 2.8em; 
 
\t \t text-align: center; 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t font-weight: 700; 
 
\t } 
 

 
.btn:hover, .btn:focus { 
 
\t \t color: #fff; 
 
\t \t outline: none !important; 
 
\t } 
 

 
.first { 
 
\t \t border-color: #73ADFF; 
 
\t \t color: #fff; 
 
\t \t background-color:#73ADFF; 
 
\t \t vertical-align:middle,!important; 
 
\t \t padding: 10px 16px; 
 
\t \t line-height: 16px; 
 
\t \t display: inline-block; 
 
\t \t font-size:12px; 
 
\t \t font-weight:600; 
 
\t \t margin-top:14px; 
 
\t \t margin-right:150px; 
 
\t }

 
 
    
 
<nav class="navbar navbar-custom"> 
 
    <div class="container"> 
 
    <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>      
 
     </button> 
 
    </div> 
 
            
 
    <div class="collapse navbar-collapse" id="myNavbar"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <a href="signup.php"> 
 
      <button class="btn first"> 
 
      <span class="glyphicon glyphicon-plus"> 
 
      </span>&nbsp;OFFER PROPERTY</button></a> 
 
     </ul> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="signup.php"> 
 
      <span class="glyphicon glyphicon-user"> 
 
      </span>&nbsp;Login/Register</a> 
 
      </li> 
 
     </ul> 
 
    </div>    
 
    </div> 
 
</nav> 
 

Answer 1

당신은 차이를 볼 수 있습니다 http://getbootstrap.com/docs/3.3/components/#navbar-default

귀하의 모든 문제는 CSS 관련이 있습니다. 또한 모든 코드를 게시하지 않았으므로 화면 캡처는 여기에 게시 한 코드와 다릅니다. 어쨌든 CSS를 재조정하고 모바일 메뉴가 내 컴퓨터에서 제대로 작동하도록했습니다. 아래 검토 :

.navbar-custom { 
 
     background-color:#36b; 
 
     color:#ffffff; 
 
     border-radius:0; 
 
     /*height:68px; Don't need to compensate for the large padding now*/ 
 
     height: auto; 
 
     margin-bottom: 0; 
 
    } 
 

 
    .navbar-custom .navbar-nav > li > a { 
 
    color:#fff; 
 
    text-align: center; 
 
    padding-left: 0; 
 
    /* padding: 25px 0 75px 0; Not sure why so much padding */ 
 
    padding: 25px 0 5px 0; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight:300; 
 
    font-size:13px; 
 
    } 
 

 
    /*Make sure we can see our mobile menu on our blue background */ 
 
    .navbar-custom button.navbar-toggle { 
 
    border: 1px solid #e0e0e0; 
 
    } 
 
    .navbar-custom span.icon-bar { 
 
    background-color: #fff; 
 
    } 
 

 
    .btn { 
 
    box-sizing: border-box; 
 
    appearance: none; 
 
    background-color: transparent; 
 
    border: 2px solid #e74c3c; 
 
    border-radius: 0.6em; 
 
    color: #e74c3c; 
 
    cursor: pointer; 
 
    align-self: center; 
 
    font-size: 12px; 
 
    font-weight: 600; 
 
    line-height: 1; 
 
    margin: 20px; 
 
    padding: 1.2em 2.8em; 
 
    text-align: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
    font-weight: 700; 
 
    } 
 

 
    .btn:hover, .btn:focus { 
 
    color: #fff; 
 
    outline: none !important; 
 
    } 
 

 
    .first { 
 
    border-color: #73ADFF; 
 
    color: #fff; 
 
    background-color:#73ADFF; 
 
    vertical-align:middle,!important; 
 
    padding: 10px 16px; 
 
    line-height: 16px; 
 
    display: inline-block; 
 
    font-size:12px; 
 
    font-weight:600; 
 
    margin-top:14px; 
 
    margin-right:150px; 
 
    }