在最小的設備上隱藏標誌並顯示文字的最佳方式是什麼？

我知道這可能是一個類似的問題，但我找不到適合我的情況的問題。我正在使用Boostrap，並在左上方顯示徽標，問題出現在小型設備上，當菜單切換時它看起來很有趣，所以在最小的設備上我想顯示公司名稱的文本而不是徽標。什麼是最好的方式來做到這一點？任何幫助感謝！在最小的設備上隱藏標誌並顯示文字的最佳方式是什麼？

*目前都在我的文字和標識，但你可以看到，如果沒有文字在那裏的標誌將匹配...

<div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">    
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 

    <a class="navbar-brand" href="index.html"> 
     German Magic Farm 

     <img src="img/german-magic-logo-sm-bars.png" width="110" height="133" alt="German Magic Farm Logo" longdesc="index.html"> 
    </a> 
</div>

You can see the test version of this site here

來源

2015-06-30 user3386434

使用hidden classes隱藏在小型設備的標誌：hidden-xs或hidden-sm，具體取決於您要定位的設備。

<a class="navbar-brand" href="index.html"> 
    <span>German Magic Farm</span> 
    <img class="hidden-xs" src="img/german-magic-logo-sm-bars.png" width="110" height="133" alt="German Magic Farm Logo" longdesc="index.html" > 
</a>

或者，如果你想太多隱藏的文本大的設備，你可以這樣做：

<a class="navbar-brand" href="index.html"> 
    <span class="hidden-md hidden-lg">German Magic Farm</span> 
    <img class="hidden-xs" src="img/german-magic-logo-sm-bars.png" width="110" height="133" alt="German Magic Farm Logo" longdesc="index.html"> 
</a>

來源

2015-06-30 15:24:46

我已經用'visible-xs'去了文本範圍。 – isherwood

yh真的，事情也是這樣的：我不是，如果他總是希望文本跨度可見，那麼我所做的僅僅是一個建議，但您對可見-xs @isherwood正確 –

-1

此加入你的CSS文件：

@media only screen and (max-width:768px) { 
    .navbar-brand img { 
     display: none !important; 
    } 
}

來源

2015-06-30 15:17:24 Wazaaaap

這是在從平板電腦和波紋管設備隱藏的標誌，我認爲他是在談論移動和這不顯示任何文字。 –

他在討論菜單何時「切換」，即768px。此外，徽標文本正在顯示。（測試出來） – Wazaaaap

當實用程序類已經可用時，不需要額外的CSS。 – isherwood

在最小的設備上隱藏標誌並顯示文字的最佳方式是什麼？

回答

相關問題