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

防止在导航带4 xs尺寸

1 个答案: