（引导 3）如何保留我的底部导航栏而不是 3 跨度图标

Question

所以，自从我 3 周前开始使用 MVC 以来，我对它还是有点陌生​​。

我正在使用一个 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"。这确保了菜单不会折叠到按钮中。其次，我删除了您的字形图标并将它们重新定位在跨度类中。我将您的每个ActionLink 都包裹在跨度内。然后我将您的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>