Разбить строку в div перед укладкой в ​​div - PullRequest
Новая
       60

Разбить строку в div перед укладкой в ​​div

0 голосов
/ 04 апреля 2019

Я хочу создать отзывчивую навигационную панель с помощью начальной загрузки.Проблема в том, что когда я делаю окно маленьким, иконка свертывания движется сверху справа под моим «логотипом».

Вот как выглядит сайт на обычном экране: normale size

Вот как это выглядит на экране мобильного телефона: mobile size unwanted stacking

И вот как я бы хотел, чтобы это выглядело.Div должен разбить строку, прежде чем нажимать кнопку свертывания под собой:

mobile size wanted

<!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

1 Ответ

1 голос
/ 04 апреля 2019

Как правило, вам нужно установить максимальную ширину, которую может принять этот 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">
...