通过品牌推广停止Bootstrap Navbar汉堡堆叠

Question

​

​

这张图片很好地说明了这一点。当浏览器调整汉堡包堆叠的大小时，然后(仍在堆叠中)徽标通过“max-width:100%”调整大小。由于某些原因，我不知道如何禁用堆叠和强制徽标调整大小更早。以下是已删除尝试修复的普通代码。

​

<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

我认为当单行空间不足时，这两个块进行堆叠是很自然的行为。

尝试在某些视窗中设置品牌标识的百分比宽度，比如60%的品牌标识和40%的汉堡包，以保持它们相同的线条。