Question

我尝试按照W3上的默认引导程序教程创建一个页眉中有导航栏的页面。我的导航栏出现，但不是预期的。 li标签的点仍然出现，它们正好相互叠加。

我不确定是什么原因造成的。以下是该页面的HTML：

<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html>
<html lang="en">
    <head runat="server">
        <meta charset="utf-8" />
        <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
        <link href="<%: Url.Content("~/favicon.ico") %>" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <%: Scripts.Render("~/Scripts/jquery-1.8.2.min.js") %>
        <%: Scripts.Render("~/Scripts/jquery-ui-1.8.24.min.js") %>
        <%: Styles.Render("~/Content/bootstrap/css/bootstrap.min.css") %>
        <%: Styles.Render("~/Content/bootstrap/css/bootstrap-theme.min.css") %>
    </head>
    <body>
        <header>
            <div class="container">
                <div class="col-sm-4">
                    <p class="site-title"><%: Html.ActionLink("your logo here", "Index", "Home") %></p>
                </div>
                <div class="col-sm-8">
                    <section id="login">
                        <%: Html.Partial("_LoginPartial") %>
                    </section>                    

                </div>
            </div>                    
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header"></div>
                    <div>
                        <ul class="navbar-nav" id="menu">
                            <li class="active"><%: Html.ActionLink("Home", "Index", "Home") %></li>
                            <li><%: Html.ActionLink("About", "About", "Home") %></li>
                            <li><%: Html.ActionLink("Contact", "Contact", "Home") %></li>
                        </ul>
                    </div>
                </div>
            </nav>     
        </header>
        <div id="body">
            <asp:ContentPlaceHolder ID="FeaturedContent" runat="server" />
            <section class="content-wrapper main-content clear-fix">
                <asp:ContentPlaceHolder ID="MainContent" runat="server" />
            </section>
        </div>
        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; <%: DateTime.Now.Year %> - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        <%: Scripts.Render("~/bundles/jquery") %>
        <asp:ContentPlaceHolder ID="ScriptsSection" runat="server" />
    </body>
</html>

我在Chrome和Firefox中尝试此操作，两者都有相同的结果。任何建议将不胜感激。谢谢！

Answer 1

我猜你在谈论'li'标签的子弹，通常可以使用CSS删除

ul {
    list-style-type: none;
}

希望它可能会有所帮助。

Answer 2

尝试在* .css文件中添加此CSS代码，或在style中的header标记内添加：

.navbar-nav {
    list-style-type: none;
}
.navbar-nav li {
    padding-left: 4px;
    padding-right: 4px;
}

Answer 3

您需要将HomeController更改为<ul class="navbar-nav" id="menu">（添加<ul class="nav navbar-nav" id="menu">课程），并且您不应该在nav周围需要这些额外的div。请参阅Docs。

这就是你所拥有的：

ul

这是您可以将其更改为的内容。请参阅工作代码段。

<div>
  <ul class="navbar-nav" id="menu">
    <li class="active">
      <%: Html.ActionLink("Home", "Index", "Home") %>
    </li>
    <li>
      <%: Html.ActionLink("About", "About", "Home") %>
    </li>
    <li>
      <%: Html.ActionLink("Contact", "Contact", "Home") %>
    </li>
  </ul>
</div>

＆＃13;

<ul class="nav navbar-nav" id="menu">

＆＃13;

Bootstrap导航栏显示为常规<li>

3 个答案: