在Bootstrap导航列表中恢复列表样式

Question

我在修复Bootstrap导航列表中的要点时遇到了困难.我的标记是由WordPress生成的,但一般的想法是:

<nav>
    <ul class='nav navbar-nav'>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
        <li><a href='#'>Home</a></li>
    </ul>
</nav>

我已经查看了Bootstrap已经应用到什么基本上是一个列表的样式,我无法弄清楚什么是删除原来在那里的列表样式.

我尝试使用下面的方法将设置恢复为默认值,但这没有用.

footer nav ul.nav > li {
    list-style-type:disc;
}

我希望有任何Bootstrap向导可以帮助我解决这个问题.

Answer 1

如果您不能像skelly建议的那样更改标记,那么您还必须重新覆盖该display属性list-item,因此您的CSS应如下所示:

footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}

堆栈片段中的演示

footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>

<footer>
  <nav>
    <ul class='nav navbar-nav'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
    </ul>
  </nav>
</footer>

还有很多其他CSS样式会影响列表类型.如果你想要删除它们,如果你可以在页面上运行javascript,你可以用这样的jQuery删除类:

$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");

堆栈片段中的演示

$("footer nav ul.nav.navbar-nav").removeClass("nav navbar-nav");

footer nav ul.nav > li {
  margin-left: 40px;
  list-style-type: disc;
  display: list-item
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<footer>
  <nav>
    <ul class='nav navbar-nav'>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>Home</a></li>
    </ul>
  </nav>
</footer>