html - MVC 元素的 CSS 问题

Question

我刚刚按照 Mirosoft 的建议创建了一个 MVC:

关于页面的结果如下:

但是当我想扩展更多标题时，布局被破坏如下:

这是 _Layout.cshtml 中的代码:

    <div class="navbar navbar-inverse navbar-fixed-top">
        <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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
                </ul>
            </div>
            <div>
                Expend
            </div>
            <div>
                Expend
            </div>
            <div>
                Expend
            </div>
        </div>
    </div>

谁能帮我解决这个问题？根本原因是什么？我只是在研究 MVC 一段时间。

如有任何帮助，我们将不胜感激。

Answer 1

您在页眉上添加了 3 个没有任何 CSS 类的 div。这是“损坏的” header 的原因。它没有损坏，它只是使用 div 元素的默认行为。

如果您删除这 3 个 div，您的布局将再次正常。

 <div>
     Expend
 </div>

如果要向标题菜单添加新元素，您需要在 <ul class="nav navbar-nav"> 中添加新元素。如下图

<ul class="nav navbar-nav">
    <li>@Html.ActionLink("Home", "Index", "Home")</li>
    <li>@Html.ActionLink("About", "About", "Home")</li>
    <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    <li>Put your new link here</li>
</ul>

此布局使用 bootstrap 3。如果你想自定义它，你首先应该学习 html 和 css，然后是 bootstrap 3。要学习 bootstrap 3，你可以使用 w3schools 教程:https://www.w3schools.com/bootstrap/default.asp

我想强调一下 ADyson 在评论中所说的话。我们需要一个最小的、可重现的例子。当您提出任何问题时，请记住，对您来说显而易见的事情对其他人而言并不明显。

希望我能帮到你。