所以我得到了这个看起来像这样的导航栏。
<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 像素，它应该有:
- 左侧的导航品牌( float )
- 新行中的四个链接和搜索栏(底部)
- 右侧有两个链接( float )
问题:实现此目标的最佳方法是什么？
我正在考虑使用 Bootstrap 网格系统或隐藏整个导航并使用媒体查询显示不同的导航栏。
<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>
您可能想尝试为较小的视口(viewport)添加类以及您想要修饰外观的任何其他方式，您可以在这里找到它们 https://getbootstrap.com/docs/4.1/utilities/flex/ ，但基本上这是一般的想法。没有必要为不同的视口(viewport)设置两个不同的版本，并且通常不赞成这样做。在我的版本中，您只需使用 Bootstrap 类即可完成，无需额外的 CSS
关于html - 导航栏中的响应能力，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52392859/