Блог

Главная - Вопросы по программированию - Исправление изображения в навигационной панели | Bootstrap

Исправление изображения в навигационной панели | Bootstrap

#html #css #bootstrap-4

#HTML #css — файл #bootstrap-4 #css

Вопрос:

Сегодняшний мой веб-сайт выглядит следующим образом: введите описание изображения здесь

Когда я подключаюсь к своему веб-сайту через мобильный, внешний вид меняется на: введите описание изображения здесь

Вместо этого я бы хотел, чтобы изображение пакета не переходило в меню — что-то вроде этого справа: введите описание изображения здесь

Мой код:

   <body>
    <!-- jQuery first -->
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">

  <a class="navbar-brand">DeniseAndrade</a>

  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>


   <div class="collapse navbar-collapse" id="navbarSupportedContent">

     <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
      </li>
         {% for category in categories %}
      <li class="nav-item">
        <a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
      </li>
          {% endfor %}
      </ul>


    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="{% static 'bag1.png' %}" width="25px"></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'login' %}">Login</a>
      </li>
    </ul>
   </div>
  </nav>

  <main role="main" class="container">
    <div class="pb-2 mb-2">
      {% block page_header %}{% endblock page_header %}
    </div>
    <div>
      {% block content %}{% endblock content %}
    </div>
  </main>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV rV" crossorigin="anonymous"></script>  
  </body>

Какая-нибудь помощь?

Спасибо!!

Ответ №1:

Я не уверен, что это лучшая практика. Но вот и все. Я просто переместил тег запроса за пределы div collapse navbar-collapse 

    <a class="nav-link outside__div" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
        ------
        </div>

Изменения CSS:

 .outside__div {
    position: absolute;
    right: 80px;
}

И вот как это выглядело бы

Результат

обновлено: я думаю, это может быть полезно. вам решать, какой способ лучше использовать — абсолютную позицию или этот.

HTML:

 <nav class="navbar navbar-expand-md navbar-light bg-light mb-4 border" id="top">
    <a class="navbar-brand">DeniseAndrade</a>
    <div class="d-flex flex-row  order-2 order-md-3">
        <ul class="navbar-nav flex-row ">
            <li class="nav-item pr-3">
                <a class="nav-link" href="{% url 'cart:cart_detail' %}"><img src="assets/images/image.jpg" width="25px"></a>
            </li>
        </ul>
        <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse order-3 order-md-2" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'root:seller' seller 'Novidades' %}">Novidades</a>
            </li>
            {% for category in categories %}
            <li class="nav-item">
                <a class="nav-link" href="{% url 'root:seller' seller category.category %}">{{ category.category }}</a>
            </li>
            {% endfor %}
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="{% url 'login' %}">Login</a>
            </li>
        </ul>
    </div>
</nav>

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

1. Спасибо, но изображение оказалось поверх букв…

2. Вы не можете исправить это с помощью media query также есть другое решение, но это не совсем то, что вы ищете, я обновлю свой ответ, чтобы вы могли его увидеть.

3. Отлично! Большое вам спасибо! При использовании в полноэкранном режиме значок сумки заканчивался после выпадающего списка навигационной панели, но в любом случае все в порядке!

4. Я так рад, что смог вам помочь.

Ответ №2:

Обратитесь к документации Bootstrap и посмотрите, есть ли способ указать nav-item , который никогда не должен сворачиваться. На первый взгляд, «Внешний контент» может быть тем, что вы хотите?

Если все остальное не помогает, вы также можете выполнить это, поместив значок сумки в div за пределами навигационной панели и расположив его вручную. Конечно, это далеко не идеально.