css - 在最小设备上隐藏 Logo 并显示文本的最佳方法？

Question

我知道这可能是一个类似的问题，但我找不到适合我情况的问题。我正在使用 Boostrap 并且有一个 Logo 显示在左上角，问题出在小型设备上，当菜单被切换时它看起来很有趣所以在最小的设备上我想显示公司名称而不是 Logo 的文本。最好的方法是什么？任何帮助表示赞赏!

*目前我有文字和 Logo ，但您可以看到，如果没有文字， Logo 会匹配...

<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

Answer 1

使用 hidden classes 在小型设备上隐藏 Logo :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>