html - WordPress 的 Bootstrap 导航菜单样式问题

Question

我有一个使用 Bootstrap 框架设置的网站。

我有一个导航栏，其中列出了我的页面元素 WordPress因此:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <?php wp_list_pages('title_li=');?>        
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

这很好用，但是我不能再为页面元素 ( <li> ) 设置样式，而且样式的显示方式与我手动列出页面的方式不同:

    <ul class="nav navbar-nav">
   <li><a href="index">Home</a></li>
   <li><a href="index">Home</a></li>
   <li><a href="index">Home</a></li>
   ...
   </ul>

如果我以 WordPress 的方式使用元素，我该如何设置元素的样式？如果我将导航栏设为白色，则无法看到菜单项，因为默认情况下它们也是白色的，我无法更改它们。

编辑:

这是导航栏元素源代码中的 HTML 输出:

<ul class="nav navbar-nav">
<li class="page_item page-item-2 current_page_item"><a href="http://shabaz.comoj.com/">Home</a></li>
<li class="page_item page-item-11"><a href="http://shabaz.comoj.com/?page_id=11">Portfolio</a></li>
<li class="page_item page-item-46"><a href="http://shabaz.comoj.com/?page_id=46">Services</a></li>
<li class="page_item page-item-21"><a href="http://shabaz.comoj.com/?page_id=21">Gallery</a></li>
<li class="page_item page-item-24"><a href="http://shabaz.comoj.com/?page_id=24">Contact</a></li>
      </ul>

查看源代码 Here

Answer 1

将以下内容添加到您的样式表中:

.navbar-nav li a
{
    color: #000 !important;
}

这应该将文本的颜色更改为黑色。

编辑:要设置当前页面元素的样式，请使用:

.current_page_item a
{
    background: red;
}