css - Bootstrap 模式和下拉菜单不能在同一个导航栏中工作，我该如何覆盖 CSS？

Question

下面是我用来创建导航栏的代码。

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
        <ul class="nav pull-right">
            <li><a href="#myModal" class="dropdown-toggle" data-toggle="modal" data-keyboard="false" data-backdrop="static">Login</a></li>
            <li class="dropdown all-camera-dropdown">  
           <a class="dropdown-toggle" data-toggle="dropdown" href="#">  
            My Account  
               <b class="caret"></b>  
           </a>  
    <ul class="dropdown-menu">  
            <li ><a data-toggle="tab" href="#">List item</a></li>    
        <li ><a data-toggle="tab" href="#">Another item</a></li>
     </ul>  
</li>
</div>
</div>
</div>

我首先将模态功能添加到我的 NAV 栏，这是模态窗口的触发器。

$('#myModal').on('hide',function(){
    $('.nav > li > a.modal-open-li').removeClass('modal-open-li');
});

然后我添加了下拉菜单。但是我的模态现在不起作用。它们在同一个 CSS 命名空间中吗？我该如何覆盖它？

这是我正在使用的脚本文件:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script src="js/formsAction.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="bootstrap-modal.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>

这是我正在使用的 CSS 文件

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap.responsive.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="css/datepicker.css" rel="stylesheet">

如果我评论以下两个脚本，我的模式开始工作，但我的下拉菜单停止工作。

<link href="static/css/bootstrap.min.css" rel="stylesheet"> 
<script src="static/js/bootstrap.min.js"></script>

Answer 1

CSS

1) 使用 bootstrap.css 或 bootstrap.min.css，但不能同时使用。

2) 如果你想从 bootstrap 覆盖样式，创建一个 style 文件并将它添加到 bootstrap.css 之后

即，

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap.responsive.css" rel="stylesheet">
<!--Your custom css file-->
<link href="css/custom.css" rel="stylesheet">

现在，在您的 custom.css 文件中，为要覆盖的样式提供 !important。

JavaScript

1) 使用 bootstrap.js 或 bootstrap.min.js，但不能同时使用。

2) bootstrap.js 或 bootstrap.min.js 将包含所有 javascript 功能。 不需要再添加modal.js、dropdown.js、datepicker.js，所以去掉。