Невозможно выровнять правильные элементы навигации с Bootstrap 4, чтобы появиться в адаптивном представлении - PullRequest
3 голосов
/ 10 апреля 2020

Я уже давно пытаюсь это выяснить. Я немного нуб, когда дело доходит до Bootstrap, поэтому, пожалуйста, позвольте мне, возможно, простой вопрос. Я пытаюсь создать панель навигации с bootstrap 4, с большинством пунктов меню слева, но с кнопкой входа в систему справа. Я придумал какой-то обходной способ сделать это (что может быть неправильно), но всякий раз, когда я просматриваю страницу в режиме просмотра телефона или планшета, пункт «Логин» меню не появляется, когда вы щелкаете по значку меню бургера. Он появляется до определенного момента (кажется, что это около 760 пикселей), а затем просто исчезает из поля зрения. Вот разметка к этому моменту, любая помощь вообще будет оценена.

image

1 Ответ

1 голос
/ 10 апреля 2020

Я думаю, проблема здесь

<ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex"> 
                <li class="nav-item text-right">
                    <a class="nav-link " href="#">Login</a>
                </li>
            </ul>

d-none d-md-flex - эта часть означает, что этот элемент будет скрыт (d-none) до 768px (d- md -flex), а затем будет отображаться как flex. Попробуйте удалить d-none

ОБНОВЛЕНО

Лучший способ - удалить автономный логин ul и добавить логин как часть глобального ul list

<ul class="navbar-nav w-100">
    <li class="nav-item active">
      <a class="nav-link" href="index.php">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 3</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Placeholder 4</a>
    </li>
    <li class="nav-item flex-sm-grow-1 text-sm-right">
        <a class="nav-link " href="#">Login</a>
    </li>
  </ul> 

Посмотрите ближе к flex-sm-grow-1 text-sm-right в Login li. И не забудьте добавить w-100 к ul.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...