Bootstrap4: Почему другая ячейка строки выровнена по левому краю и не отцентрирована, несмотря на mx-auto? - PullRequest
Новая
       5

Bootstrap4: Почему другая ячейка строки выровнена по левому краю и не отцентрирована, несмотря на mx-auto?

1 голос
/ 14 марта 2020

Я пытаюсь создать отзывчивый заголовок в Bootstrap4. Намерение состояло в том, чтобы создать выровненное по левому краю меню LO GO (текст) и выровненное по правому краю меню, когда область просмотра велика, а затем при сокращении до «маленькой» области просмотра обе становятся центрированными.

Это то, что у меня есть до сих пор: 

    <nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
        <div class="nav col-sm-6 bg-secondary">
            <DIV class="mx-auto">
              <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
            </DIV>
        </div>
        <div class="col-sm-6">
           <ul class="nav mx-auto float-sm-right text-dark bg-success">
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
          </ul>
        </div>
    </nav>

ПРИМЕЧАНИЕ: Пожалуйста, не обращайте внимания на отвратительные фоны, я использовал их для отладки отклика моей сетки и на каком элементе прикрепить утилиту.

Все выглядит прямо в широком окне просмотра. Но когда я уменьшил ширину, LO GO отцентрирован, но меню переместилось влево. Я пробовал mx-auto в строке выше (в DIV), но никаких изменений в поведении не наблюдалось.

Где я go ошибся?

1 Ответ

0 голосов
/ 14 марта 2020

Вы можете использовать классы d-flex justify-content-center для выравнивания по центру пунктов меню. 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-light bg-white no-gutters py-0 border-bottom">
        <div class="nav col-sm-6 bg-secondary">
            <div class="mx-auto">
              <a class="navbar-brand text-light p-2 h3" href="#">LOGO</a>
            </div>
        </div>
        <div class="col-sm-6">
           <ul class="nav mx-auto d-flex justify-content-center float-sm-right text-dark bg-success">
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu1</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu2</a></li>
            <li class="nav-item"><a class="nav-link p-2" href="#">Menu3</a></li>
          </ul>
        </div>
    </nav>
...