Переключатель Navbar не показывает значки после нажатия на маленьком экране - PullRequest
Новая
       6

Переключатель Navbar не показывает значки после нажатия на маленьком экране

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

Django, Bootstrap 4;

У меня есть эта панель навигации с переключателем:

image

Переключение разворачивается маленьким щелчком экрана, но не отображает значки и вместо этого показывает пустые строки. Когда я поворачиваю телефон, он работает просто отлично. Я предполагаю, что это что-то с разрешением экрана, но я не знаю, как это исправить.

Я могу подтвердить, что jQuery и Bootstrap в правильном порядке.

I Я использую эти: 

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

Спасибо.

РЕДАКТИРОВАТЬ

До нажатия: здесь

После нажатия: здесь

1 Ответ

2 голосов
/ 13 апреля 2020

Ситуация такова, что всякий раз, когда вы открываете свою веб-страницу в своем мобильном телефоне, разрешение принимается ниже <= 568 пикселей, но вы устанавливаете <code>d-none d-sm-inline или d-none d-sm-inline-block.

, поэтому все ваши nav-links имеют свойство display: none, поэтому он не будет виден на вашем мобильном телефоне и не виден в альбомной ориентации.

, поэтому решение: удалите d-none из всех span tag, а также замените d-sm-inline-block на d-inline-block и d-sm-inline на d-inline как в примере ниже. 

<li class="nav-item active">
    <a class="nav-link waves-effect" href="{% url 'product-create' %}">
        <span class="clearfix d-inline-block">
              <i class="fa fa-plus-square-o" aria-hidden="true"></i> Create Product 
        </span>
    </a>
</li>
...