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

【问题标题】：ASP.NET MVC Navbar with glyphicons and text带有字形和文本的 ASP.NET MVC 导航栏
【发布时间】：2015-04-04 07:49:05
【问题描述】：

大家好 StackOverFlow。

我对整个 asp.net MVC 有点陌生，我正在尝试制作自己的主页，但我在导航栏 + 字形图标上苦苦挣扎。我没有足够的声望来展示图片，所以我放弃了图片的链接。

我试图用图标+文本制作一个导航栏，其中图标应该位于文本上方。我的目标是这样的：

但这就是我得到的：

这是我的代码，谢谢

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

【问题讨论】：

你的链接失效了
对不起.. 我会解决的。
我现在可以显示图片了。我已经更新了。

标签： css asp.net asp.net-mvc twitter-bootstrap navbar

【解决方案1】：

如果要显示在下一行：

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

小提琴：JSFiddle

【讨论】：

【解决方案2】：

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

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

或者您可以尝试将跨度放置在锚标记内。玩一下。如果你不会成功，创建 jsfiddle 或 plunker。并解释一下你是怎么看的。

【讨论】：

【解决方案3】：

试试这个...

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

【讨论】：