时间戳

首页 > 解决方案 > 如何扩展导航项以填充下拉菜单

html - 如何扩展导航项以填充下拉菜单

问题描述

我在标准的 Bootstrap 4dropdown类中添加了一些填充，使菜单看起来更干净一些。但是，现在嵌套链接不会填满空间（见下图）。如何使链接填充到下拉菜单的整个宽度？

导航链接不填充下拉菜单

这是HTML：

<header class="site-header">
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
            <div class="container">
                <div class="media">
                    <a class="navbar-brand mr-5" href="/"><img id="brand"
                            src="#" alt="EONS" /></a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle"
                        aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="navbarToggle">
                    <div class="navbar-nav mr-auto" id="main-nav">
                        <a class="nav-item nav-link" href="#">Home</a>
                        <a class="nav-item nav-link" href="#">Latest News</a>
                        <a class="nav-item nav-link" href="#">Explore the Data</a>
                    </div>
                    <div class="navbar-nav">
                        {% if user.is_authenticated %}
                        <!-- Account Settings Dropdown Menu -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                                data-toggle="dropdown">Account</a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <span class="nav-item ml-2">Signed in:</span>
                                <strong class="ml-2">{{ user.email }}</strong>
                                <div class="dropdown-divider"></div>
                                    <a class="nav-link" href="{% url 'user-profile' %}">Your profile</a>
                                <a class="nav-link" href="{% url 'data-upload' %}">Upload data</a>
                                <div class="dropdown-divider"></div>
                                <a class="nav-link" href="{% url 'user-logout' %}">Log out</a>
                            </div>
                        </li>
                        <a class="nav-item nav-link" href="{% url 'user-logout' %}">Sign Out</a>
                        {% else %}
                        <div class="nav-item nav-link">
                            <a class="btn btn-login btn-sm" href="{% url 'user-login' %}">Log In</a>
                        </div>
                        <a class="nav-item nav-link btn" href="{% url 'user-registration' %}">Register</a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </nav>
    </header>

以及我添加的 CSS 的相关部分：

.site-header .navbar-nav .nav-link {
    font-size: 1.1rem;
    color: #cbd5db;
    padding-right: 10;
}

.site-header .navbar-nav .nav-link:hover {
    color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
    font-weight: 500;
    text-decoration: underline;
}

.dropdown-menu {
    padding-right: 5rem !important;
    border-radius: 0px !important;
}

.dropdown-menu .nav-link {
    color: #000 !important;
    font-size: 0.9rem !important;
}

.dropdown-menu .nav-link:hover {
    background: #eee;
}

标签： htmlcsstwitter-bootstrap

解决方案

width尝试为 the指定 adropdown-menu而不是padding-right例如：

.dropdown-menu {
  width: 200px !important
}

然后，您可以更改，width直到获得您想要的外观。

推荐阅读