Блог

Главная - Вопросы по программированию - Мой бренд navbar занимает много места

Мой бренд navbar занимает много места

#django #bootstrap-4

#django #bootstrap-4

Вопрос:

Я писал html-страницу с помощью bootstrap, а затем столкнулся с какой-то ошибкой, что navbrand слишком длинный. Он занимает много места в моей навигационной панели, когда я просматриваю его на мобильном устройстве, он занимает целую строку, а значок гамбургера опускается на дно. Эта проблема возникает не только с текстом, но и с изображениями.

 {% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Urci</title>
    <!-- BOOTSTRAP -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">    <!-- CSS -->
    <!-- CSS -->
    <link rel='stylesheet' href="{% static 'home/css/custom.css' %}">
    <!-- FONTS -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Latoamp;family=Oswald:wght@300amp;family=Roboto Condensedamp;display=swap" rel="stylesheet">
    <!-- W3 -->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light custom-navbar">
        <div class="container-fluid">
            <a class="navbar-brand urci-brand" href="{% url 'home' %}"><img class="branding "src="{% static 'home/images/Urci-Logo.png' %}" alt=""></a>          
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
                <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                    <div class="navbar-nav custom-navbar">
                        <a class="nav-link" href="{% url 'bod' %} ">Board of Directors</a>
                        <a class="nav-link" href="#">Events</a>
                        {% if user.is_authenticated %}
                        <div class="navbar-nav ml-auto">
                            <a class="nav-link" href="{% url 'announcement:create' %}">Create Announcement</a>
                            <a class="nav-link" href="#">Create Events</a>
                            
                        {% endif %}
                    </div>     
                    </div>
                </div>
        </div>
            
    </nav>
        {% block content %}
        
    {% endblock  %}
    
    
</body>
</html>

введите описание изображения здесь

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

1. Правильно обрезайте изображение. Справа от него есть дополнительная пустая часть.

Ответ №1:

В вашем home/css/custom.css добавьте следующее…

 .urci-brand{
   width: fit-content !important;
}

Это означало бы, что ширина тега привязки будет равна ширине содержимого внутри него.
И !important используется для перезаписи некоторых стилей начальной загрузки.

Метки: