0

这是我用来创建 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>
4

1 回答 1

1

CSS

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

2）如果您想从引导程序中覆盖样式，请创建一个style文件并将其添加到 bootstrap.css 之后

IE，

<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所以删除它。

于 2013-09-24T05:14:23.997 回答