Question

我想在悬停时更改导航栏背景颜色，字体颜色和颜色。我怎么能这样做？我的定制CSS无法正常工作。

这是我的代码：

<head>
    <meta charset="UTF-8">
    <title>@if (!empty($title) )
        {{ $title }}  
        @else 
        MyHero 
        @endif</title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  
   <link href="{{ asset('css/style.css') }}" rel="stylesheet" type="text/css"/>  
    <link href="{{ asset('carousel.css') }}" rel="stylesheet"/>    
    <script>var BASE_URL = "{{ url('')}}/";</script>   


</head>

<header> 
    <!-- NAVBAR
================================================== -->
    <body>
        <div class="navbar-wrapper" >
            <div class="container-fluid" >

                <nav class="navbar navbar-inverse navbar-static-top" style="margin: 0;padding: 0;border:none;background-color: #00578d; "> 
                    <div class="container-fluid" >
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <a class="navbar-brand" href="{{ url('/')}}" style='font-weight:bold;font-size:20px; height: 50px; margin-top: 10px; '>MyHero</a> 

                        </div> 
                        <div id="navbar" class="navbar-collapse collapse" style='font-weight:bold;font-size:20px;height: 50px; margin-top: 10px;' >   



                            <ul class="nav navbar-nav"> 

                                @if( !empty($menu)) 
                                @foreach($menu as $item) 
                                <li><a href="{{ url($item['url'])}}">{{ $item['link'] }}</a></li> 
                                @endforeach 
                                @endif

                                <li><a class="shopp" href="{{ url('shop')}} " >Shop</a></li>  

                                <li> 
                                    <a href="{{ url('shop/checkout')}}">
                                        <img width="25" src="{{ asset('images/shopping-cart.png')}}" >  
                                        <div id="total-cart"> 
                                            @if(! Cart::isEmpty()) 
                                            {{Cart::getTotalQuantity()}}
                                            @endif 


                                        </div> 

                                    </a>
                                </li>
                            </ul>   


                            <ul class="nav navbar-nav navbar-right"> 
                                @if(Session::has('user_id')) 
                                <li><a href="{{ url('/')}}">{{ Session::get('user_name') }}</a></li>   
                                @if( Session::has('is_admin'))
                                <li><a href="{{ url('cms/dashboard')}}">CMS DASHBOARD</a></li>  
                                @endif
                                <li><a href="{{ url('user/logout')}}">Logout</a></li> 
                                @else
                                <li><a href="{{ url('user/signin')}}">Sign In</a></li>
                                <li><a href="{{ url('user/signup')}}">Sign Up</a></li>  

                                @endif
                            </ul>  
                            <ul class="nav navbar-nav navbar-right">
                         <li>

                             <form class="navbar-form" role="search" autocomplete="off">
                      <div class="form-group" style="width: 240px;">
                        <input type="search" id="searchbox" name="search" placeholder="Search products or categories..." class="form-control" style="min-width: 240px;"></input>
                      </div>
                        <div style="position: absolute;margin: 0 auto;padding: 5px; ">
                            <div class="search-info"></div>
                        </div>
                    </form>


                  </li>
                            </ul> 
                        </div> 
                </nav> 
               @include ('inc.sm') 
               @include ('inc.errors')
                @yield('carousel') <br><br> 
            </div>
        </div>




</header>  <br><br><br><br>

我想在悬停时更改导航栏背景颜色，字体颜色和颜色。我怎么能这样做？我的定制CSS无法正常工作。我想在悬停时更改导航栏背景颜色，字体颜色和颜色。我怎么能这样做？我的定制CSS无法正常工作。

Answer 1

如果您使用的是cdn链接，则可以下载引导程序文件，并将其安装在应用程序目录中，无论您将资产置于何处。然后你可以在bootstrap文件中找到你要找的东西并在那里改变它（你可以使用像sublime这样的文本编辑器来查找文件和行）。免责声明不会将相同的更改文件重复用于其他项目。

Answer 2

虽然通常不建议您尝试使用：

background-color: #00578d !important;

！important规则是一种制作CSS级联的方法，但也包含您认为最重要的规则。无论CSS规则中出现哪个规则
，都将始终应用具有！important属性的规则

如何更改bootstrap导航栏颜色？

2 个答案: