html - 我的 Bootstrap css 文件损坏

Question

嗨，我使用 bootstrap 大约一个月了，我从来没有遇到过那种错误，我只是想将我的菜单更改为透明的，这样我就可以从堆栈溢出中获得帮助，然后我更改了我的菜单。但是当我更改我的菜单时，我的 slider 图片不在 slider 显示范围内，并且我的列表框文本管理不善。我不知道出了什么问题。我只是编辑我的 CSS 代码。

.navbar {
    background-color: transparent;    
    background: transparent; 
}
.navbar li { 
    color: #000 
}

slider 代码:

<!-- Insert to your webpage where you want to display the slider -->
<div id="amazingslider-1" style="display:block;position:relative;margin:16px auto 32px;">
    <ul class="amazingslider-slides" style="display:none;">
        <li><img src="images/header1.jpg" alt="header1" /></li>
        <li><img src="images/header2.jpg" alt="header2" /></li>
        <li><img src="images/header3.jpg" alt="header3" /></li>
        <li><img src="images/header4.jpg" alt="header4" /></li>
        <li><img src="images/header5.jpg" alt="header5" /></li>
    </ul>
    <div class="amazingslider-engine" style="display:none;"><a href="http://amazingslider.com">JavaScript Slideshow</a></div>
</div>
<!-- End of body section HTML codes -->

菜单代码:

<div class="navbar navbar-inverse navbar-fixed-top"
 role="navigation">
       <div class="container">
         <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
             <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="#">Bootstrap theme</a>
         </div>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Nav header</li>
                 <li><a href="#">Separated link</a></li>
                 <li><a href="#">One more separated link</a></li>
               </ul>
             </li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
     </div>

谁能帮忙？

Answer 1

看起来你的代码没问题。有一些建议。 尝试使用特定的子选择器。将父类用于导航栏 div。

<div class="parent">
<div class="navbar navbar-inverse navbar-fixed-top"
 role="navigation">
       <div class="container">
         <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
             <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="#">Bootstrap theme</a>
         </div>
         <div class="navbar-collapse collapse">
           <ul class="nav navbar-nav">
             <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a></li>
                 <li><a href="#">Another action</a></li>
                 <li><a href="#">Something else here</a></li>
                 <li class="divider"></li>
                 <li class="dropdown-header">Nav header</li>
                 <li><a href="#">Separated link</a></li>
                 <li><a href="#">One more separated link</a></li>
               </ul>
             </li>
           </ul>
         </div><!--/.nav-collapse -->
       </div>
     </div>
</div>

对于CSS

.parent .navbar {
    background-color: transparent;    
    background: transparent; 
}
.parent .navbar li { 
    color: #000 
}

希望避免与其他规则冲突。