导航栏中的响应

电弧范围

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

<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 像素屏幕的图像。目标设计

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

网页版

这是一个尝试。

<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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章