我想使用 Bootstrap 设计响应式导航栏。问题是当我缩小窗口时，折叠图标从右上角移到我的“ Logo ”下方。
这是网站在正常屏幕上的样子:
这是它在手机屏幕上的样子:
这就是我希望它看起来的样子。 div 应在按下其下方的折叠按钮之前断开该行:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-4 py-md-5 px-sm-4 px-md-5" style="background-color: aquamarine">
<div id="navbar-logo" class="logo ml-2" style="font-size: 20px; letter-spacing: 10px;">
PRENAME SURNAME
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" onclick="toogleMenuBackground()">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse pt-3 pt-md-4 pt-lg-0" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link">home</a>
</li>
<li class="nav-item">
<a class="nav-link">about</a>
</li>
<li class="nav-item">
<a class="nav-link">more</a>
</li>
<li class="nav-item">
<a class="nav-link">content</a>
</li>
</ul>
</div>
</nav>
</body>
</html>
Codepen 中的上述 HTML
最佳答案
通常，您需要设置此 div 可以采用的最大宽度。
您可以为 .logo 大小使用一个设定值(如果您知道它的大小)，或者使用更适合 future 的解决方案，您说您希望 .logo最多占用 100% 的宽度，减少了导航按钮的大小(以及所有边距)，如下所示:
.logo {
max-width: calc(100% - 64px);
}
如果您坚持不添加额外的 CSS 并仅使用 Bootstrap 类，您可以强制执行 display:flex。然后，您可以将以下类添加到您的导航中:d-flex flex-nowrap justify-content-between，因此:
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-4 py-md-5 px-sm-4 px-md-5 d-flex flex-nowrap justify-content-between">
关于html - 在堆叠 div 之前在 div 中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55522437/