Bootstrap 3.0.2를 사용하여 Glyphicons on Rails 4.0.0으로 드롭 다운 메뉴를 디자인하려고합니다. 그러나 Glyphicon과 링크가있는 텍스트는 같은 줄에 표시되지 않습니다. 내 코드는 다음과 같습니다.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>
<%= link_to "Profile", current_user %></a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-wrench"></span>
<%= link_to "Settings", edit_user_path(current_user) %></a>
</li>
<li class="divider"></li>
<li>
<a href="#"><span class="glyphicon glyphicon-off"></span>
<%= link_to "Sign out", signout_path, method: "delete" %></a>
</li>
</ul>
</li>
이제 링크를 순수한 텍스트로 바꾸면 내 코드는 다음과 같습니다.
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> <%= gravatar_for(current_user, size: 20) %> <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#"><span class="glyphicon glyphicon-user"></span>
Profile</a>
</li>
<li>
<a href="#"><span class="glyphicon glyphicon-wrench"></span>
Settings</a>
</li>
<li class="divider"></li>
<li>
<a href="#"><span class="glyphicon glyphicon-off"></span>
Sign Out</a>
</li>
</ul>
</li>
이제 완벽하게 작동합니다.
누구든지 도와 주시고 잘못 된 일을 알려주시겠습니까? 감사합니다!
드롭 다운의 앵커 표시 스타일은로 설정됩니다 block. display:block;호버 효과를 메뉴의 100 % 너비로 설정합니다.
.dropdown-menu > li > a {display:inline;} 링크와 글 리피 콘을 한 줄에 넣지 만 호버 효과를 끊습니다.
링크 안에 glyphicon을 추가해보십시오.
<li><a href="#"><span class="glyphicon glyphicon-search"></span> Action</a></li>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다