html - 停止 Bootstrap Navbar 汉堡包与品牌堆叠

Question

图片很好地展示了这一点。当调整浏览器大小时，汉堡包堆叠，然后(仍在堆叠) Logo 通过“最大宽度:100%”调整大小。出于某种原因，我无法弄清楚如何禁用堆叠并强制 Logo 提前调整大小。这是已删除尝试修复的纯代码。

<nav class="navbar navbar-default navbar-fixed-top navbar-lg dropShad noMar">

	<div class="container-fluid">

		<div class="navbar-header">

			<a class="navbar-brand noPad" href="index.html"><img src="images/logo.png" style="width: 355px; max-width: 100%;" /></a>

			<button type="button" class="navbar-toggle collapsed marBot18" data-toggle="collapse" data-target="#corbex-navbar-collapse" aria-expanded="false">

				<span class="sr-only">Toggle Navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>

			</button>

	</div>

	<div class="collapse navbar-collapse" id="corbex-navbar-collapse">

		<ul class="nav navbar-nav navbar-right">

			<li class="active"><a href="index.html"><b>Home</b><span class="sr-only">(current)></span></a></li>

			<li><a href="location.html"><b>Location</b></a></li>

			<li><a href="contactUs.html"><b>Contact Us</b></a></li>

		</ul>

	</div>

    </div>

</nav>

Answer 1

我认为当单行空间不够时，这两个 block 的自然行为是堆叠。

尝试在特定视口(viewport)中给品牌 Logo 百分比宽度，例如品牌 Logo 为 60%，汉堡包为 40%，以保持它们在同一行。