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

Stack Snippets中的演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

---

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

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

Stack Snippets中的演示

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;