因此,自从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 = "" })
</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" }) </span></li>
<li><span class="glyphicon glyphicon-search"></span><span>@Html.ActionLink(" Pesquisa", "Index", "Pracas", new { area = "" }, new { @class = "hidden-xs" })</span> </li>
<li><span class="glyphicon glyphicon-road"></span><span>@Html.ActionLink(" GPS", "Index", "GPS", new { area = "" }, new { @class = "hidden-xs" })</span> </li>
<li><span class="glyphicon glyphicon-file"></span><span>@Html.ActionLink(" Formulário", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span> </li>
<li><span class="glyphicon glyphicon-envelope"></span><span>@Html.ActionLink(" Mensagens", "Index", "Home", new { area = "" }, new { @class = "hidden-xs" })</span> </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>