在堆叠 div 秒之前在 div 中换行

Question

我想使用 bootstrap 设计响应式导航栏。问题是当我将 window 变小时，折叠图标从我的 "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>

以上HTML在Codepen

Answer 1

一般来说，您需要设置此 div 可以采用的最大宽度。

您可以为 .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">

在堆叠 div 秒之前在 div 中换行

Break line in div before stacking divs

html

css

responsive-design

twitter-bootstrap

responsive