접힌 내비게이션 막대에 3 줄 대신 한 줄이 표시되는 이유는 무엇입니까?

Question

방금 ​​부트 스트랩 학습 과정을 시작했습니다. 나는 자기 주도 코스에서 개발하고있는 페이지에 이상한 기이가 있음을 알았습니다. 내 탐색 막대가 접히도록 브라우저 크기를 줄이면 일반적인 3 개의 수평선과 반대되는 단일 수평선 만 표시됩니다. 기능적으로는 모든 것이 작동하지만 왜 이런 일이 일어나고 있는지 알 수 없다는 것은 나를 미치게합니다. Bootstrap v3.3.7을 사용하고 있습니다. 현재 겉 모양의

예 네비게이션 바는 붕괴 때

하지만 제가 정말 원하는 것은 "세 가지 라인"외모는 내가 다른 곳을 참조하십시오

가 여기 내 index.html을 안에 내 탐색 정의의 :

,691 :

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
       <span class="icon-bar" /> 
      </button> 
      <a class="navbar-brand em-text" href="index.html">Gamma</a> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="index.html">Home</a></li> 
       <li><a href="about.html">About</a></li> 
       <li><a href="contact.html">Contact</a></li> 
      </ul> 
     </div> 
     <!--/.nav-collapse --> 
    </div> 
</nav> 

그리고 여기 내있는 style.css의

body { 
    padding-top: 50px; 
} 

.em-text { 
    color: #1caa98 !important; 
} 

.col-md-4 { 
    margin-bottom: 20px; 
} 

section { 
    padding: 40px 0 40px 0; 
} 

.jumbotron { 
    background: #1b222a url(../img/site_showcase_bg.jpg) no-repeat top center; 
    color: #fff; 
    height: 575px; 
    overflow: none; 
} 

    .jumbotron h1 { 
     margin-top: 60px; 
    } 

    .jumbotron p { 
     margin-bottom: 40px; 
    } 

    .jumbotron .app-btn { 
     width: 40%; 
     margin-right: 30px; 
    } 

    .jumbotron .showcase-img { 
     width: 75%; 
    } 

.demo { 
    width: 100%; 
    padding: 3px; 
    border: 1px solid #ccc; 
} 

section#feature { 
    background-color: #1caa98; 
    color: #ffffff; 
    padding: 40px; 
    overflow: auto; 
} 

    section#feature ul li { 
     font-size: 22px; 
     list-style: none; 
     line-height: 2.0em; 
    } 

    section#feature ul { 
     padding: 0; 
     margin: 0; 
    } 

section#title-bar { 
    padding: 0; 
    margin: 0; 
    height: 80px; 
    background: #1caa98; 
} 

    section#title-bar h1 { 
     color: #fff; 
    } 

footer { 
    background: #333; 
    color: #fff; 
    padding: 30px 0 20px 0; 
} 

    footer a { 
     color: #fff; 
    } 

    footer li { 
     float: left; 
     padding: 0 10px 0 10px; 
     list-style: none; 
    } 

    footer p { 
     float: right; 
    } 

/* MEDIA QUERIES*/ 

/*Smaller laptop screen or tablet*/ 
@media(max-width: 1200px) { 
} 

/* Anything under 991, we're getting rid of phone image*/ 
@media(max-width: 991px) { 
    .showcase-img { 
     display: none; 
    } 
} 

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

    .jumbotron .app-btn { 
     width: 30%; 
    } 

    .jumbotron { 
     height: 400px !important; 
     background-size: 100% 100%; 
    } 

     .jumbotron h1 { 
      margin-top: 10px; 
     } 
} 

@media(max-width: 768px) { 

    .jumbotron { 
     height: 350px !important; 
     background-size: 100% 100%; 
    } 

     .jumbotron h1 { 
      margin-top: 10px; 
     } 

    section#title-bar h1 { 
     padding-left: 5px; 
    } 
} 

/*Maybe for phones*/ 
@media(max-width: 500px) { 

    .jumbotron { 
     height: 450px !important; 
     background-image: none !important; 
     text-align: center; 
    } 

     .jumbotron img.app-btn { 
      width: 60%; 
      margin: 0 auto 30px auto; 
      display: block; 
     } 

    section#feature ul li { 
     font-size: 19px !important; 
    } 

    footer p { 
     float: none; 
     text-align: center; 
     padding-top: 20px; 
    } 
} 

Answer 1

<span> 태그를 자기 닫는 방식으로 사용하려고 시도 했으므로 수행 할 수 없습니다.

브라우저가 실수를 수정하려하지만 <span> 요소를 잘못 배치합니다. 이로 인해 문제가 발생합니다. <span> 태그가 제대로 닫혀 있는지 귀하의 마크 업을 개정

:

<button type="button" class="collapsed navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
</button> 

의