Question

嗨我使用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>

任何人都可以帮忙吗？

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 
}

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

我的bootstrap css文件是损坏

1 个答案: