带有glyphicons和文本的ASP.NET MVC Navbar

Question

带有glyphicons和文本的ASP.NET MVC Navbar

Kas*_*cke 3 css asp.net asp.net-mvc navbar twitter-bootstrap

嗨StackOverFlow人.

我是整个asp.net MVC的新手,我试图创建自己的主页,但我正在努力与navbar + glyphicons.我没有足够的声誉来显示图片,所以生病了链接到图片而不是.

我试图制作一个带有图标+文本的导航栏,其中Icon应位于文本上方.我的目标是这样: 我想做什么

但这就是我得到的: 在此输入图像描述

这是我的代码谢谢

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Daw*_*wan 5

如果要在下一行显示:

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

Run Code Online (Sandbox Code Playgroud)

如果要在线显示图标:

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

Run Code Online (Sandbox Code Playgroud)

小提琴:JSFiddle

归档时间：	11 年，4 月前
查看次数：	6372 次
最近记录：	11 年，4 月前