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;
}

Answer 2

好吧，首先，你有一个缺少的style.css样式表，这在WordPress中至关重要。此外，一旦你拥有它，确保样式表是AFTER Bootstrap CSS，否则你将无法更改它。

此外，您需要在此处添加空格：

<link href="http://shabaz.comoj.com/wp-content/themes/new-wp-responsive-theme/style.css"rel="stylesheet" type="text/css"/>

到此：

<link href="http://shabaz.comoj.com/wp-content/themes/new-wp-responsive-theme/style.css" rel="stylesheet" type="text/css"/>

（参见style.css“）

WordPress的Bootstrap导航菜单样式问题

2 个答案: