我的引导 css 文件已损坏答案

【问题标题】：My bootstrap css file is damage我的引导 css 文件已损坏
【发布时间】：2014-07-03 14:46:29
【问题描述】：

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

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

滑块代码：

<!-- 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>

谁能帮忙？

【问题讨论】：

你应该尝试在 jsFiddle 上复制问题
my slider pictures are out of slider showing 如果我理解正确（不确定），似乎隐藏的图像应该“隐藏”在背景后面。由于您现在已经使背景透明，您可以看穿它并看到其他隐藏的图像。这就像试图躲在玻璃墙后面。每个人仍然可以看到你。 :) 如果不是这样，请发布更多相关代码，以便我们更好地理解问题。
情况并非如此，我的滑块图像在我更改代码之前可以正常工作，但现在我放置在滑块中的图像显示为垂直。如果我更改了之前更改的代码，那么滑块和其他东西都可以正常工作，这是我不想要的。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案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 
}

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

【讨论】：