モバイルでのみNavbarメニューアイテムグリフコンを表示 - ブートストラップ

Question

ログインボタンの隣にグリフコンを表示したい場合は、ユーザーが携帯電話にいるときにのみ表示します。私はこのためにvisible-xsクラスを使用していますが、反応するユーティリティを使用する場合、グリフコンはテキストと揃っていません。

スクリーンショット：

コード：

<div class="collapse navbar-collapse" id="myNavbar"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li><a href="#"><span class="glyphicon glyphicon-log-in visible-xs"></span> Belépés</a></li> 
     </ul> 
    </div> 

Answer 1

私は、インラインに設定された表示プロパティを使用してカスタムクラスを使用して、それを解決：

@media only screen and (max-width: 768px) { 
    .hidden-on-mobile{ 
     display: inline; !important; 
    } 
}