防止在引导程序 4 xs 大小的导航中包装多个徽标

Question

我找到的大多数示例都隐藏了除品牌徽标之外的所有内容，并且只显示一个切换图标。但是我希望在小屏幕上有多个图标，但目前即使它们有足够的空间，它们也会以 xs 大小包装。

我现在也用较小的图标替换较大的图标，但由于我猜这不是缺少的空间，这也无济于事。

品牌徽标和两个图标应该在同一行中。有人可以把我推向正确的方向吗？您必须在自己的窗口中运行代码片段以使其足够小(问题仅在xs大小上(。

.material-icons.md-24 { font-size: 24px; }
.material-icons.md-48 { font-size: 48px; }

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>

Answer 1

您可以使用导航栏中的flex-row和navbar-nav来防止它在xs屏幕上垂直堆叠。

https://www.codeply.com/go/beHGmETlkM

<header class="header">
<nav class="navbar navbar-light navbar-toggleable bg-faded justify-content-center flex-row">
<!--Logo-->
<a class="navbar-brand mr-auto" href="/" title="logo">
<span>logo-img</span>
</a>
<!--
the centered links in the header (only visible on bigger screens)
-->
<div class="navbar-collapse collapse">
<ul class="navbar-nav mx-auto justify-content-center hidden-sm-down">
<li class="nav-item">
<a class="nav-link" href="#">link1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">link2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">login</a>
</li>
</ul>
</div>
<!-- the icons on the right (xs screens)
The two (and maybe more) icons SHOULD NOT WRAP
-->
<ul class="nav navbar-nav ml-auto flex-row justify-content-end hidden-sm-up">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-24">favorite</i>
</a>
</li>
</ul>
<!-- the icons on the right (bigger devices) -->
<ul class="nav navbar-nav ml-auto justify-content-end hidden-xs-down">
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48" style="">mail_outline</i>
</a>
</li>
<li class="nav-item">
<a class="btn">
<i class="material-icons md-48">favorite</i>
</a>
</li>
</ul>
</nav>
</header>

https://www.codeply.com/go/beHGmETlkM