在堆叠 div 之前在 div 中换行答案

【问题标题】：Break line in div before stacking divs在堆叠 div 之前在 div 中换行
【发布时间】：2019-04-04 18:07:27
【问题描述】：

我想使用引导程序设计一个响应式导航栏。问题是当我把窗口变小时，折叠图标从我的“徽标”下方的右上方移动。

这是网站在正常屏幕上的样子：

这是它在移动屏幕上的样子：

这就是我想要的样子。 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

【问题讨论】：

标签： html css twitter-bootstrap responsive-design responsive

【解决方案1】：

通常，您需要设置此 div 可以采用的最大宽度。

您可以使用 .logo 大小的设定值（如果您知道它将是什么大小），或者使用更面向未来的解决方案，您说您希望 .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">

【讨论】：

我通过设置最大宽度使用了您的第一个解决方案。第二种解决方案在使用换行符正确显示标题方面也确实有效。但问题是，现在可折叠菜单将出现在徽标标题和折叠按钮旁边，而不是在其下方。我猜是因为flex-nowrap。您知道解决方法吗？