Question

所以这是我用来创建NAV栏的代码。

<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，因此请将其删除。

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

1 个答案: