在最小设备上隐藏徽标并显示文本的最佳方法？

Question

我知道这可能是一个类似的问题，但我找不到适合我情况的问题。我正在使用 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

Answer 1

将此添加到您的 css 文件中：

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

Answer 2

使用 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>

在最小设备上隐藏徽标并显示文本的最佳方法？

Best way to hide logo on smallest devices and show text instead?

css

twitter-bootstrap

hide