我的网站上的导航栏（见代码块）在移动的时候会扩展高度（因为它不是一条线都能容纳的）。我注意到如果我把牌子删掉，它就适合了。然而，当在一个大屏幕上，我想保留品牌。我怎样才能让它只为小屏幕（移动）而消失，而为电脑屏幕而停留？
谢谢！
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand custom-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
我试着把这个添加到我的css中，但这只会砍掉我品牌的一半以使其适合，我认为这比仅仅摆脱整个东西更丑陋。
.custom-brand{
overflow: hidden;
}
请参阅Bootstrap 4.0文档:隐藏元素
要隐藏元素，只需使用
若要仅在给定的屏幕大小间隔上显示元素，可以将一个
您可以做的是添加一个类，例如，将desktop作为类名，我们正在使用一个媒体查询来实现这一点。它现在只能在超过500px宽的屏幕上显示。
null
<style>
@media screen and (max-width: 500px){
.desktop{
display: none!important;
}
}
</style>
<a class="navbar-brand custom-brand desktop" href="#">Logo</a>