0
我有一个完美的导航栏（使用navbar.css）。但是当我添加页面上另一个元素所需的bootstrap.css时，导航栏会中断。这就是我一直试图解决冲突：bootstrap.css文件 navbar css被bootstrap.css覆盖
navbar.css添加!important到每一个项目后
- 引用
navbar.css和包围<!--------------------> - 这个其他元素不利用链路参考整个
bootstrap.css文件，所以我用萤火虫，以消除所有未使用的CSS（至< 500行扩展CSS） - 通过我修改
bootstrap.css文件逐行并删除任何引用我的n avbar（导航标签等）
但导航栏仍然打破。下面是导航栏的代码和我的CSS：
HTML
<nav class='sidebar sidebar-menu-collapsed'>
<ul>
<li>
<a class='expandable' href='#'>
<span><i class="fa fa-align-justify fa-2x" aria-hidden="true" id='justify-icon'></i></span>
</a>
</li>
<li>
<a class='expandable' href='myshares.php' title='My Archives'>
<span><i class="fa fa-archive fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>My Archives</span>
</a>
</li>
<li>
<a class='expandable' href='sharedwithme.php' title='Shared w/ Me'>
<span><i class="fa fa-inbox fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>Shared w/ Me</span>
</a>
</li>
<li class="active">
<a class='expandable' href='#' title='Add a Share'>
<span><i class="fa fa-plus-square fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>Add Share</span>
</a>
</li>
<li>
<a class='expandable' href='tools.html' title='Tools'>
<span><i class="fa fa-wrench fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>Tools</span>
</a>
</li>
<li>
<a class='expandable' href='howitworks.html' title='How this Works'>
<span><i class="fa fa-question fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>How This Works</span>
</a>
</li>
<li>
<a class='expandable' href='logout.php' title='Logout'>
<span><i class="fa fa-power-off fa-2x" aria-hidden="true"></i></span>
<span class='expanded-element'>Logout</span>
</a>
</li>
</ul>
</nav>
CSS
@import "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css";
@import "https://www.sonoclipshare.com/public/bootstrap.css";
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background: none repeat scroll 0 0 white;
}
nav.sidebar-menu-collapsed {
width: 34px;
}
nav.sidebar-menu-expanded {
width: 116px;
}
nav.sidebar {
position: fixed;
top: 0px;
left: 0px;
height: 100%;
background: none repeat scroll 0 0 #0099ff;
color: white;
padding: 20px 10px;
text-align: left;
}
nav.sidebar a#justify-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
}
nav.sidebar a#logout-icon {
outline: 0;
color: white;
font-size: 24px;
font-style: normal;
position: absolute;
bottom: 10px;
left: 10px;
}
nav.sidebar ul {
margin: 0;
padding: 0;
margin-top: 60px;
}
nav.sidebar ul li {
margin: 0;
padding-left: 3px;
margin-top: 20px;
list-style-type: none;
}
nav.sidebar ul li a.expandable {
outline: 0;
color: white;
text-decoration: none;
}
nav.sidebar ul li a.expandable:hover {
color: #bbbbbb;
}
nav.sidebar ul li a.expandable span.expanded-element {
margin-left: 2px;
display: none;
font-size: 11px;
position: relative;
bottom: 2px;
}
nav.sidebar ul li.active {
background: none repeat scroll 0 0 black;
border-radius: 4px;
padding: 4px;
}
nav.sidebar ul li.active a.expandable {
color: white;
}
nav.sidebar ul li.active a.expandable:hover {
color: white;
}
#justify-icon {
margin-bottom: 40px;
}
.fa-power-off {
margin-top: 40px;
}
JQuery的
$(document).ready(function() {
function expandMyMenu() {
$("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
function collapseMyMenu() {
$("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
function showMenuTexts() {
$("nav.sidebar ul a span.expanded-element").show();
$("nav.sidebar ul a span.expanded-element").css('display', 'inline');
};
function hideMenuTexts() {
$("nav.sidebar ul a span.expanded-element").hide();
};
$("#justify-icon").click(function(e) {
if ($("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
expandMyMenu();
showMenuTexts();
$(this).css({
color: "#000"
});
} else if ($("nav.sidebar").hasClass("sidebar-menu-expanded")) {
collapseMyMenu();
hideMenuTexts();
$(this).css({
color: "#FFF"
});
}
});
});
如果我删除了违规行@import "https://www.sonoclipshare.com/public/bootstrap.css"; navbar看起来应该是。这是一个codepen玩耍。我在此空出了500行bootstrap.css。这是一个jsfiddle与所有的css
添加此行，完整的引导程序CSS打破我的菜单一样。通过将该行添加到上面的codepen可以看出。 – UltrasoundJelly