因此,自从3星期前开始使用MVC以来,我对MVC还是有点陌生​​。

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

我在页面底部有一个导航栏,其中包含一些Html.ActionLink,每个都有其glyphicon和文本。
我想做的是,当我将窗口尺寸减小到一定程度时,我不想使用由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>


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

提前致谢!

最佳答案

好的,首先我从第二个div中删除了class="navbar-collapse collapse"。这样可以确保菜单不会折叠到按钮中。其次,我删除了您的字形,并将它们重新放置在span类中。我将您的每个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>




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

07-28 02:23
查看更多