GitHub에서 잘못 표시되는 드롭 다운 상자

Question

GitHub에 푸시하면 Jekyll을 사용하여 만든 GitHub 페이지 사이트가 내비게이션 막대를 올바르게 표시하지 않습니다. 제목을 GitHub의 푸시 그러나

이

표시되지이며 링크 드롭 다운 상자 위에 표시됩니다 보인다 : 사용하여 로컬 내장 때와 같이 제대로 기능 '지킬 봉사'

로컬로 Jigyll 3.4.3은 github에 나열된 것과 동일하며 이전에는 내 사이트가 정상적으로 표시되었습니다 (온라인에서는 로컬로 동일). 그러나 몇 달 동안 틈이 생기면 올바르게 표시 할 수없는 것처럼 보입니다. 다시. 나는 Jekyll에 대한 경험이별로 없지만 처음으로 실험을했기 때문에 다른 웹 개발 경험이 있습니다.

모든 조언을 주시면 감사하겠습니다.

navbar.html

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container-fluid"> 
     <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
<!--   <form class="navbar-search pull-right" 
action="http://google.com/search" method="get"> 
{% if site.safe %} 
      <input type="hidden" name="q" value="site:{{ site.url | remove_first:'http://' }}"> 
{% else %} 
      <input type="hidden" name="q" value="site:{{ site.url | domain_name }}"> 
{% endif %} 
      <input type="text" name="q" class="input-medium search-query" placeholder="Search"> 
     </form> --> 
     <div class="nav-collapse collapse"> 
      <ul class="nav"> 
{% for node in site.navbar_list %} 
{% if node.name == page.group %}{% assign active = 'active' %} 
{% else %}{% assign active = nil %}{% endif %} 
{% if node.dropdown %} 
       <li class="dropdown dropdown-container {{ active }}"> 
        <a class="dropdown-link" href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a> 
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">{{ node.name }}<b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
    {% for sub in node.dropdown %} 
         <li><a href="{{ site.baseurl }}{{ sub.link }}">{{ sub.name }}</a></li> 
    {% endfor %} 
        </ul> 
       </li> 
{% else %} 
       <li class="{{ active }}"> 
        <a href="{{ site.baseurl }}{{ node.link }}">{{ node.name }}</a> 
       </li> 
{% endif %} 
{% endfor %} 
      </ul> 
     </div><!--/.nav-collapse --> 
    </div> 
</div> 

있는 style.css

/* title of the site */ 
#header { 
    height: 80px; 
} 
#header hgroup { 
    position: absolute; 
    top: 10px; 
    left: 20px; 
} 
#header h1 { 
    margin: 0; 
    font-size: 1.75em; 
    font-weight: bold; 
} 
#header h2 { 
    color: #ccc; 
    margin: 0 0 4px 16px; 
    line-height: 0.8; 
    font-size: 1.0em; 
    font-weight: normal; 
} 
#header a, 
#header a:hover, 
#header a:visited { 
    text-decoration: none; 
} 

/* header.html: navbar */ 
.navbar-fixed-top { 
    margin-bottom: 20px; 
    position: static; 
} 
.navbar-fixed-top .navbar-inner { 
    padding: 0; 
    border-top: 1px solid #d4d4d4; 
    border-bottom: 1px solid #d4d4d4; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067); 
} 
.navbar .nav > .active > a, 
.navbar .nav > .active > a:hover, 
.navbar .nav > .active > a:focus { 
    box-shadow: none; 
} 
.navbar .btn-navbar { 
    margin-bottom: 5px; 
} 
.lt-ie9 .collapse { 
    overflow: visible; /* removed from 2.1.1, but still IE need this */ 
} 

/* header.html: dropdown container */ 
.navbar .nav > li.dropdown-container { 
    position: relative !important; 
} 
.navbar .nav > li.dropdown-container .dropdown-link { 
    position: absolute !important; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 
.navbar .nav > li.dropdown-container .caret { 
    margin-left: 1.5em; 
} 
.navbar .nav > li.dropdown-container .dropdown-link + .dropdown-toggle { 
    z-index: 0; 
} 

Answer 1

당신이 assets\css에 _includes\css에서 style.css 파일을 복사 (site.css로 이름을 변경해야하는 문제를 해결하기 때문에 이미 style.css가 assets\css 폴더에 있음) 링크를 추가해야합니다. 아래 _includes\head.html에 :

{% endcase %} 
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/site.css"> 
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/style.css"> 

<!-- Font Awesome -->