Блог

Главная - Вопросы по программированию - Разрыв строки в div перед укладкой divs

Разрыв строки в div перед укладкой divs

#html #css #twitter-bootstrap #responsive-design #responsive

#HTML #css #twitter-bootstrap #адаптивный дизайн #отзывчивый

Вопрос:

Я хочу создать адаптивную панель навигации с использованием 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>

Приведенный выше HTML в Codepen

Ответ №1:

В общем, вам нужно будет установить максимальную ширину, которую может принимать этот div.

Вы могли бы либо использовать установленное значение для .размер логотипа (если вы знаете, какого размера он будет), или, альтернативно, используйте немного более перспективное решение, где вы говорите, что хотели бы.логотип должен занимать до 100% ширины, уменьшенной на размер кнопки навигации (и всех полей), как здесь:

 .logo {
    max-width: calc(100% - 64px);
}

Если вы настаиваете на том, чтобы не добавлять дополнительный CSS и использовать только классы начальной загрузки, вы могли бы применить 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">

Комментарии:

1. Я использовал ваше первое решение, установив максимальную ширину. Второе решение также сработало с точки зрения правильного отображения заголовка с разрывом строки. Но проблема заключалась в том, что теперь сворачиваемое меню будет отображаться рядом с заголовком логотипа и кнопкой сворачивания, а не под ним. Я думаю, это из-за flex-nowrap . Знаете ли вы обходной путь для этого?