ASP.NET 带有字形和文本的 MVC 导航栏

Question

大家好 Whosebug。

我对整个 asp.net MVC 有点陌生，我正在尝试制作自己的主页，但我在导航栏 + 字形图标上苦苦挣扎。我没有足够的声誉来显示图片，所以我给图片添加 link。

我正在尝试制作带有图标 + 文本的导航栏，其中图标应位于文本上方。我的目标是这样的：

但这就是我得到的：

这是我的代码谢谢

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li><a href="#home"><span class="glyphicon glyphicon-home"></span></a></li>
                <li>@Html.ActionLink("Home", "Index", "Home")</li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
                <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                <li><a href="#contact"><span class="glyphicon glyphicon-envelope">Contact</span></a></li>
                <li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>

Answer 1

您似乎遇到了标记问题。试试这个：

<li><span class="glyphicon glyphicon-envelope"></span><br /><a href="#contact">Contact</span></li>
<li><span class="glyphicon glyphicon-shopping-cart"></span><br /><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</a></li>

或者您可以尝试将 span 放在锚标记内。稍微玩一下。如果您不成功，请创建 jsfiddle 或 plunker。并说明您的看法。

Answer 2

试试这个...

 <a href="#home">
 <i class="glyphicon glyphicon-home"></i>
 <span> Home</span>

Answer 3

如果要在下一行显示：

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li>
                <a href="@Url.Action("Index", "Home")">
                    <span class="glyphicon glyphicon-home"></span>
               Home
                </a>
           </li>
          <li>
                <a href="@Url.Action("About", "Home")">
                    <span class="glyphicon glyphicon-home"></span>
                Index
                </a>
           </li>
          </ul>
</div>

如果你想在一行中显示图标：

<div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li  class="text-center">
                <a href="@Url.Action("Index", "Home")">
                    <span class="glyphicon glyphicon-home"></span><br/>
                Home
                </a>
           </li>
          <li class="text-center">
                <a href="@Url.Action("About", "Home")">
                    <span class="glyphicon glyphicon-home"></span><br/>
                About
                </a>
           </li>
          </ul>
</div>

Fiddle: JSFiddle

ASP.NET 带有字形和文本的 MVC 导航栏

ASP.NET MVC Navbar with glyphicons and text

css

asp.net

asp.net-mvc

navbar

twitter-bootstrap