我正在使用 Ruby on rails3 和 twitter-bootstrap 创建网站。
我从官方网站下载了 bootstrap.css 并设置。
它显示一切整洁但超链接颜色。
我想要它是蓝色的，但所有的超线都显示为黑色....
谁能告诉我为什么？？我想不通为什么
我的代码是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="Ojw/+I3qfeT25/i6L8ipof4U44ytbGXwcwrzHyIOICM=" name="csrf-token" />
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/twitter/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/communities.js?body=1" type="text/javascript"></script>
<script src="/assets/follows.js?body=1" type="text/javascript"></script>
<script src="/assets/messages.js?body=1" type="text/javascript"></script>
<script src="/assets/rails.js?body=1" type="text/javascript"></script>
<script src="/assets/registrations.js?body=1" type="text/javascript"></script>
<script src="/assets/top.js?body=1" type="text/javascript"></script>
<script src="/assets/user_profiles.js?body=1" type="text/javascript"></script>
<script src="/assets/users.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.core.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.ui.datepicker.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
<link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/boostrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/communities.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/follows.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/messages.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/registrations.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/top.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/users.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.theme.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="images/favicon.ico" rel="shortcut icon">
<link href="images/apple-touch-icon.png" rel="apple-touch-icon">
<link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72">
<link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114">
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="/" class="brand">Test</a>
<div class="pull-right">
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
<i class="icon-user"></i>
John <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/users/edit"><i class="icon-cog"></i> Edit</a></li>
<li class="divider"></li>
<li>
<a href="/logout"><i class="icon-chevron-up"></i> Log out</a>
</li>
</ul>
</div>
</div>
<div class="container nav-collapse">
<ul class="nav">
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container wrapper">
<div class="content">
<div class="row">
<div class="span12">
</div>
</div>
<div class="row">
<div class="span9">
<ul class="breadcrumb" id=""><li><a href="/">TOP</a><span class="divider">/</span></li><li><a href="/messages/received">Messages</a><span class="divider">/</span></li></ul>
<div class="well sidebar-nav">
<div class="page-header">
<h1>
Received Messages
</h1>
</div>
<table class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>delete</th>
<th>ID</th>
<th>Unread</th>
<th>Date</th>
<th>
From
</th>
<th>Subject</th>
</tr>
</thead>
<tbody>
<form accept-charset="UTF-8" action="/messages/discard?via=post" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /><input name="authenticity_token" type="hidden" value="Ojw/+I3qfeT25/i6L8ipof4U44ytbGXwcwrzHyIOICM=" /></div>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="6" /></td>
<td>6</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/6?breadcrumb=inbox">Re: Re: ssss</a></td>
</tr>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="5" /></td>
<td>5</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/5?breadcrumb=inbox">Re: Re: ssss</a></td>
</tr>
<tr>
<td><input id="id_" name="id[]" type="checkbox" value="1" /></td>
<td>1</td>
<td></td>
<td>December 13, 2012</td>
<td>
Mike</td>
<td><a href="/messages/show/1?breadcrumb=inbox">ssss</a></td>
</tr>
<input class="btn btn-mini btn-danger" name="commit" type="submit" value="delete checked items" />
</form> </tbody>
</table>
</ br>
<div class='text-align:center;'>
</div>
</div>
</div>
<div class="span3">
<div class="well sidebar-nav">
<h3>Menu</h3>
<ul class="nav nav-list">
<li class="nav-header">Account</li>
<li>
<a href="/users/edit"><i class="icon-cog"></i> User Edit</a>
</li>
<li class="divider"></li>
<li class="nav-header">Messages</li>
<li><a href="/messages/received"><i class="icon-envelope"></i> Received</a></li>
<li><a href="/messages/sent"><i class="icon-share-alt"></i> Sent</a></li>
<li><a href="/messages/trash"><i class="icon-trash"></i> Trash</a></li>
<li class="divider"></li>
<li class="nav-header">Lists</li>
<li><a href="/users"><i class="icon-envelope"></i> User List</a></li>
<li><a href="/communities"><i class="icon-share-alt"></i> Community List</a></li>
</ul>
<br />
</div><!--/.well -->
</div>
</div><!--/row-->
</div><!--/content-->
</div> <!-- /container -->
<footer>
<br />
<br />
<p><center>© 2012 Test</center></p>
</footer>
</body>
</html>
最佳答案
默认情况下，Bootstrap 链接是蓝色的。在大量 CSS 文件中的某处有一个规则集，看起来至少有点像这样:
a { color:black; }
如果您将 Firefox 与 Firebug 或 Chrome 开发者工具一起使用，您可以检查任何 anchor 元素并准确查看违规规则集所在的位置。
或者，您可以将此规则集放在要加载的最后一个 CSS 文件的底部:
a { color:blue; }
关于css - 为什么在使用 bootstrap 时不以蓝色显示超链接？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13870719/