防止在导航中以 bootstrap 4 xs 大小换行多个徽标

Question

我发现的大多数示例只是隐藏了除品牌徽标之外的所有内容，并且只显示了一个切换图标。但是我想要在小屏幕上显示多个图标，但目前即使它们有足够的尺寸，它们也会包裹在 xs 尺寸上 space。

我现在也用小图标替换了大图标，但因为它不是缺失的 space 我想，这也无济于事。

品牌标志和两个图标应该在同一行。有人可以把我推向正确的方向吗？您必须运行自己 window 中的代码片段以使其足够小（问题仅在于 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

防止在导航中以 bootstrap 4 xs 大小换行多个徽标

Prevent wrapping of multiple logos in nav in bootstrap 4 xs size

nav

navbar

bootstrap-4