0

我正在使用带有 twitter-bootstrap 的 Ruby on rails3 创建网站。
我从官方网站下载了 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="&#x2713;" /><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>&copy; 2012 Test</center></p>
      </footer> 





  </body>
</html>
4

1 回答 1

3

默认情况下,引导链接是蓝色的。在那一大堆 CSS 文件中的某个地方有一个规则集,看起来至少有点像这样:

a { color:black; }

如果您将 Firefox 与 Firebug 或 Chrome 开发工具一起使用,您可以检查任何锚元素并查看违规规则集的确切位置。

或者,您可以将此规则集放在要加载的最后一个 CSS 文件的底部:

a { color:blue; }
于 2012-12-14T00:14:43.983 回答