如何在 ASP.NET MVC 中更改菜单标题（垂直到水平）答案

【问题标题】：How to change menu title (vertical to horizontal) in ASP.NET MVC如何在 ASP.NET MVC 中更改菜单标题（垂直到水平）
【发布时间】：2017-06-08 09:39:00
【问题描述】：

/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="~/Content/jquery-1.10.2.min.js"></script>
    <title>@ViewBag.Title</title>
</head>
<body>
    <div>
        @Html.Action("Menu", "Nav")
    </div>
</body>
</html>

/view/Nav/Menu.cshtml

@model IEnumerable<string>     
@Html.ActionLink("Home","List","Product",null,
    new {@class ="btn btn-block btn-default btn-lg"})     
@foreach (var link in Model)
{
  @Html.RouteLink(link, new { controller = "Product", action = "List", category = link, page = 1 }, 
     new{@class = "btn btn-block btn-default btn-lg display:inline" }
  )
}

浏览器视图

我想改变如下图的项目视图。

如何使项目垂直到水平排列

【问题讨论】：

可能display:inline-table 可以工作？
请参考 W3Schools Horizontal Navigation Bar Examples的本指南。

标签： c# css asp.net asp.net-mvc

【解决方案1】：

要使按钮水平显示，只需从类列表中删除 btn-block 类：

new{@class = "btn btn-default btn-lg" }

您不需要display:inline，因为您将它包含在class 属性中，所以无论如何这都行不通。它必须包含在 style 属性中，因为它是 CSS 规则而不是 CSS 类。

要像第二个屏幕截图中那样删除按钮周围的边框，您可以像这样覆盖 Bootstrap： style = border: 0;

style 属性中包含的 CSS 规则优先于 CSS 类。

【讨论】：