jquery - (Bootstrap 3) 如何保留我的底部导航栏而不是 3 跨度图标

Question

所以，我对 MVC 有点陌生，因为我大约 3 周前开始使用它。

我正在使用一个 Web 应用程序，我打算实现以下属性:

我在页面底部有一个导航栏，其中包含一些 Html.ActionLink，每个导航栏都有其字形图标和文本。 我想要做的是，当我将窗口大小减小到一定水平时，我不想使用由 3 个跨度图标组成的典型按钮来扩展我的底部导航栏，我打算使用与全屏相同的栏，但只是图标可见且没有文字。

到目前为止我得到的这部分代码是这样的:

<div class="navbar navbar-inverse navbar-fixed-bottom">
        <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>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Início", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse" aria-label="Right-Align">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink(" Estado", "Edit/4", "Estado_Motoristas", new { area = "" }, new { @class = "glyphicon glyphicon-random" })</li>
                    <li>@Html.ActionLink(" Pesquisa", "Index", "Pracas", new { area = "" }, new { @class = "glyphicon glyphicon-search" })</li>
                    <li>@Html.ActionLink(" GPS", "Index", "GPS", new { area = "" }, new { @class = "glyphicon glyphicon-road" })</li>
                    <li>@Html.ActionLink(" Formulário", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-file" })</li>
                    <li>@Html.ActionLink(" Mensagens", "Index", "Home", new { area = "" }, new { @class = "glyphicon glyphicon-envelope" })</li>
                    <li>@Html.ActionLink(" Definições", "Index", "Manage", new { area = "" }, new { @class = "glyphicon glyphicon-cog" })</li>
                </ul>
            </div>
        </div>
    </div>

我该怎么做才能解决我的问题？有什么可行的建议吗？

提前致谢!

Answer 1

好的，首先我从你的第二个 div 中删除了你的 class="navbar-collapse collapse"。这确保了菜单不会折叠到按钮中。其次，我删除了您的字形图标并将它们重新定位在一个 span 类中。我将您的每个 ActionLink 包裹在 span 中。然后我将您的 ActionLink 类更改为 hidden-xs。这意味着当屏幕缩小时，只剩下图标而文本消失。当屏幕为全尺寸时，会出现文本和图标。这里有一个很好的引用 responsive-utilities .

<div class="navbar navbar-inverse navbar-fixed-bottom">
<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>
            <span class="icon-bar"></span>
        </button>
        @Html.ActionLink("Início", "Index", "Home", new { area = "" })&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div>
        <ul class="nav navbar-nav">
            <li><span class="glyphicon glyphicon-random"></span><span>@Html.ActionLink(" Estado", "Edit/4", "Estado_Motoristas", new { area = "" }, new { @class = "hidden-xs" })&nbsp;&nbsp;&nbsp;&nbsp;</span></li>
            <li><span class="glyphicon glyphicon-search"></span><span>@Html.ActionLink(" Pesquisa", "Index", "Pracas", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-road"></span><span>@Html.ActionLink(" GPS", "Index", "GPS", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-file"></span><span>@Html.ActionLink(" Formulário", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-envelope"></span><span>@Html.ActionLink(" Mensagens", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span>&nbsp;&nbsp;&nbsp;&nbsp;</li>
            <li><span class="glyphicon glyphicon-cog"></span><span>@Html.ActionLink(" Definições", "Index", "Manage", new { area = "" }, new { @class = "hidden-xs" })</span></li>
        </ul>
    </div>
</div>