在堆叠div之前在div中断行

Question

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

这就是网站在普通屏幕上的样子：

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

这就是我希望它的样子。在按下自身下方的折叠按钮之前，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

Answer 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">

在堆叠div之前在div中断行

问题描述投票：0回答：1

1个回答

最新问题

在堆叠div之前在div中断行

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1