时间戳

首页 > 解决方案 > 我的导航栏品牌占用了大量空间

django - 我的导航栏品牌占用了大量空间

问题描述

我正在用引导程序编写一个 html 页面，然后我遇到了某种错误，即 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=Lato&family=Oswald:wght@300&family=Roboto+Condensed&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>

在此处输入图像描述

标签： djangobootstrap-4

解决方案

在您home/css/custom.css添加以下...

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

这意味着锚标记的宽度将是其中内容的宽度。并且!important用于覆盖一些引导样式。

推荐阅读