Joh*_*ith 5 html css twitter-bootstrap
我使用 CSS 库的主要问题是它们经常覆盖我专门设置的自定义 CSS 样式。例如,这里我有一个存在于 Bootstrap 展开/折叠菜单中的列表:
<ul class="nav navbar-nav">
<li>
<a href="#" style=""><img src="images/arrow.gif" style="width: 20px;">Link A</a>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我想设置我自己的字体颜色,所以我使用以下 CSS:
nav li {
font-size: 16px;
color: #004687;
}
Run Code Online (Sandbox Code Playgroud)
但是当我在 Firefox 的 Inspector 中查看时,我看到我选择的颜色被 Bootstrap 覆盖。
我的自定义 CSS在Bootstrap 文件加载到 HTML 文档之后发生。
如何在不设置style="color: #004687"每个元素的情况下防止这种情况发生?
编辑:感谢迄今为止的建议,但没有一个成功。我正在粘贴完整的原始代码,以便为您提供更多详细信息:
<div class="container">
<header class="navbar navbar-static-top bs-docs-nav">
<div class="col-md-4 visible-xs" id="mobile-nav-outer">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-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 href="../" class="navbar-brand">Menu</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" id="mobile-nav-inner" role="navigation">
<ul class="nav navbar-nav">
<li>
<a href="#" class="nav-mobile-link"><img src="images/arrow.gif" style="width: 20px;">Link A</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
Run Code Online (Sandbox Code Playgroud)
我的 CSS 包含如下:
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/docs.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
#mobile-nav-outer {
border: 1px solid #CCC;
background-color: #FFF;
}
#mobile-nav-inner {
border: 1px solid #CCC;
background-color: #FFF;
margin: 3px;
}
nav li {
font-size: 16px;
color: #004687;
}
.nav-mobile-link {
font-size: 16px;
color: #004687;
}
</style>
</head>
Run Code Online (Sandbox Code Playgroud)
编辑 3: 我找到了一种廉价的解决方法,即使用 ID 而不是由于 CSS 特异性(ID 的覆盖类)而起作用的类。这不是一个非常干净的解决方案,我仍然想知道为什么我不能用自己的类覆盖 Bootstrap 类。
尝试将自定义 css 文件放置在 bootstrap.css 下方。
或者
nav li {
font-size: 16px !important;
color: #004687 !important;
}
Run Code Online (Sandbox Code Playgroud)
| 归档时间: |
|
| 查看次数: |
4303 次 |
| 最近记录: |