问题：

引导4中导航条响应调整导航项目的背景色

汲昊空

2023-03-14

嘿，我已经从Bootstrap4创建了一个导航栏，但是每当我尝试测试页面的响应性时，它就会丢失导航项的背景色。它只显示文本。有人能帮我保持导航栏的颜色，每当我点击切换链接。下面是我的html和css代码。

我希望导航栏看起来像下拉菜单一样。与导航栏的背景颜色匹配。

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-family: 'Poppins', sans-serif;   
    }
    a{
        text-decoration: none;
        color: #555;
    }
    p{
        color: #555;
    }
    .header{
        background: radial-gradient(#fff,#ffd6d6);
    }
    
    .container{
        max-width: 1300px;
        margin: auto;
        padding-left: 25px;
        padding-right: 25px;
        
    }
    .navbar{
        width: 100%;
        height: 80px;
        min-height:22px;
        
    }
    .navbar.navbar-inverse {
        border: none;
      }
    .navbar .navbar-brand img {
        height: 85px;
        padding-left: 39%;
      }
      .navbar ul.navbar-nav li.nav-item a.nav-link {
        color: #fff;
      }
      #navbarMenu{
        align-items: flex-end;
        padding-right: 5%;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
</head>
<body>

    <div class="header">
        <div class="container">
            <div class="navbar">
                <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-dark bg-danger navbar-expand-lg navbar-custom ">
                        <a href="#" class="navbar-brand">
                             Only Store
                        </a>
                        <button class="navbar-toggler btn btn-secondary" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        
                        <div class="collapse navbar-collapse justify-content-end" id="navbarMenu">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a href="#" class="nav-link">Home<span class="sr-only"></span> </a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Products</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">About</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Contact</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Account</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <img src="Images/cart.png" width="30px" height="30px">
                                        <a href="javascript:void(0);" class="icon" onclick="menutoggle"></a>
                                            <i class="fa fa-bars"></i>
                                    </a>
                                </li>
                            </ul>
                            </div>
                        
                    </nav>
        </div>

共有1个答案

曹经业

2023-03-14

您是否尝试过将背景颜色添加到。崩溃和其中的子ul？

请看我下面的意思：

    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        font-family: 'Poppins', sans-serif;   
    }
    a{
        text-decoration: none;
        color: #555;
    }
    p{
        color: #555;
    }
    .header{
        background: radial-gradient(#fff,#ffd6d6);
    }
    .collapse, ul {
        background-color: #121212; 
    }
    .container{
        max-width: 1300px;
        margin: auto;
        padding-left: 25px;
        padding-right: 25px;
        
    }
    .navbar{
        width: 100%;
        height: 80px;
        min-height:22px;
        
    }
    .navbar.navbar-inverse {
        border: none;
      }
    .navbar .navbar-brand img {
        height: 85px;
        padding-left: 39%;
      }
      .navbar ul.navbar-nav li.nav-item a.nav-link {
        color: #fff;
      }
      #navbarMenu{
        align-items: flex-end;
        padding-right: 5%;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    
</head>
<body>

    <div class="header">
        <div class="container">
            <div class="navbar">
                <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-dark bg-danger navbar-expand-lg navbar-custom ">
                        <a href="#" class="navbar-brand">
                             Only Store
                        </a>
                        <button class="navbar-toggler btn btn-secondary" type="button" data-toggle="collapse" data-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        
                        <div class="collapse navbar-collapse justify-content-end" id="navbarMenu">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a href="#" class="nav-link">Home<span class="sr-only"></span> </a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Products</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">About</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Contact</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">Account</a> 
                                </li>
                                <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <img src="Images/cart.png" width="30px" height="30px">
                                        <a href="javascript:void(0);" class="icon" onclick="menutoggle"></a>
                                            <i class="fa fa-bars"></i>
                                    </a>
                                </li>
                            </ul>
                            </div>
                        
                    </nav>
        </div>

类似资料：

引导导航中的居中对齐导航项目[重复]

我试图将导航栏项目水平居中对齐，但它们向左对齐。有人能帮忙吗？这是一个桌面问题-只是要明确，我有这个问题在桌面级别。这是我目前的代码：演示：https://jsfiddle.net/cjoasysz/
引导4导航栏颜色

在Bootstrap 4中，如何更改导航栏的背景颜色？twbsColor的代码不起作用。我想让背景颜色变成不同的颜色，字体颜色变成白色。
Android导航抽屉项目无响应

抽屉打开正常并正确显示，但当我单击列表中的项目时什么都没有发生。这是我从谷歌教程（UDACITY）中获取的代码。我希望它能帮助你。我做的一切都和教程视频完全一样。
导航条

导航条使用的事 HTML5 的 nav 标签，里面推荐使用 div 容器，导航条有两个主要的部分。一个是 logo 或品牌链接和导航链接。你可以设置这些链接的对齐方式。右对齐链接使用右对齐导航链接，只要增加一个 right 类到 <ul> 标签里面。 <nav> <div class="nav-wrapper"> <a href="#" class="brand-logo">Logo<
项目、文件、服务、导航器颜色背景

在netbeans中，当我们在字体和颜色选项屏幕中选择一个配置文件时，可以改变编辑器windows的背景颜色，而不是在project、files、service Navigator中选择一个配置文件。就像你在图中看到的我是唯一有这个问题的人？
响应式引导导航栏中的中心内容

问题内容：我无法将内容集中在引导导航栏中。我正在使用引导程序3。我已经阅读了许多文章，但是所使用的CSS或方法不适用于我的代码！我真的很沮丧，所以这就像我的最后选择。任何帮助，将不胜感激！问题答案：我认为这就是您想要的。您需要从内部导航中删除，以使其居中并使其成为嵌入式块。编辑：如果只希望在不折叠导航时发生此效果，请将其围绕在适当的媒体查询中。

引导4中导航条响应调整导航项目的背景色

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档