Question

所以我有一个看起来像这样的导航栏。

<nav class="navbar navbar-expand-lg border-bottom bg-white">

  <div class="collapse navbar-collapse d-flex justify-content-between" id="myNav">
    <div class="navbar-header navbar-left">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/200x100"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cdm_nav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
    </div>

    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
    </ul>

    <form class="form-inline"> 
      <div class="input-group">
        <div class="input-group-prepend dropdown">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span>All</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
          </ul>
        </div>

        <div class="dropdown">
          <input type="text" class="form-control" data-toggle="dropdown">
          <ul id="suggestions" class="dropdown-menu" role="menu">
            <li class="dropdown-item">Keyword...</li>
          </ul>
        </div>

        <div class="input-group-append">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>

          </button>
        </div>
      </div>
    </form>
    <ul class="nav nav-pills nav-fill nav-right">
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
</nav>

https://codepen.io/arc-ranges/pen/RYqQrG

现在，这是当前在大屏幕上应该采用的方式。但是，在较小的屏幕上（例如1280像素），它应该具有：

左侧的导航品牌（浮动）
新行上的四个链接和搜索栏（底部）
右侧的两个链接（浮动）

问题：实现此目标的最佳方法是什么？

我正在考虑使用引导网格系统或隐藏整个导航，并使用媒体查询来显示另一个导航栏。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg border-bottom bg-white">

  <div class="collapse navbar-collapse d-flex justify-content-between" id="myNav">
    <div class="navbar-header navbar-left">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/200x100"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cdm_nav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
    </ul>
    
    <form class="form-inline"> 
      <div class="input-group">
        <div class="input-group-prepend dropdown">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span>All</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
          </ul>
        </div>
        
        <div class="dropdown">
          <input type="text" class="form-control" data-toggle="dropdown">
          <ul id="suggestions" class="dropdown-menu" role="menu">
            <li class="dropdown-item">Keyword...</li>
          </ul>
        </div>
        
        <div class="input-group-append">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>
            
          </button>
        </div>
      </div>
    </form>
    <ul class="nav nav-pills nav-fill nav-right">
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
</nav>

为1280px屏幕附加的图像。

任何帮助将不胜感激。祝你有美好的一天！

Answer 1

这是尝试。

<nav class="navbar navbar-expand-lg border-bottom bg-white">

  <div class="collapse navbar-collapse d-flex flex-wrap" id="myNav">
    <div class="navbar-header navbar-left order-0 col-6 col-xl-2">
      <a href="https://placeholder.com"><img src="https://via.placeholder.com/200x100"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#cdm_nav" aria-controls="myNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div class="d-flex justify-content-between order-2 order-xl-1 flex-nowrap col-12 col-xl-8">
    <ul class="navbar-nav d-flex flex-row justify-content-around justify-content-xl-center col-4 offset-2 offset-xl-0 col-xl-6">
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
    </ul>

    <form class="form-inline col-5 col-xl-6 justify-content-xl-center"> 
      <div class="input-group">
        <div class="input-group-prepend dropdown">
          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span>All</span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
            <li class="dropdown-item">Category 1</li>
          </ul>
        </div>

        <div class="dropdown">
          <input type="text" class="form-control" data-toggle="dropdown">
          <ul id="suggestions" class="dropdown-menu" role="menu">
            <li class="dropdown-item">Keyword...</li>
          </ul>
        </div>

        <div class="input-group-append">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i>

          </button>
        </div>
      </div>
    </form>
    </div>
    <ul class="nav nav-pills nav-fill nav-right order-1 order-xl-2 col-6 col-xl-2 d-flex justify-content-end">
      <li>Link</li>
      <li>Link</li>
    </ul>
  </div>
</nav>

您可能想尝试为较小的视口添加类，并通过其他任何方式修饰外观，可以在https://getbootstrap.com/docs/4.1/utilities/flex/处找到它们，但是基本上这是大概的概念。不必为不同的视口使用两个不同的版本，通常不赞成这样做。在我的版本中，只需使用Bootstrap类即可完成此操作，而无需额外的CSS

导航栏中的响应能力

1 个答案: