时间戳

首页 > 解决方案 > 导航栏中的响应性

html - 导航栏中的响应性

问题描述

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

<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>

附上 1280 像素屏幕的图像。目标设计

任何帮助将不胜感激。祝你今天过得愉快！

标签： htmlcsstwitter-bootstrap

解决方案

这是一个尝试。

<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 来完成它

推荐阅读