MVC项目的CSS问题答案

【问题标题】：CSS issue with MVC projectMVC项目的CSS问题
【发布时间】：2019-10-31 08:02:11
【问题描述】：

我刚刚创建了一个 MVC 作为 Mirosoft 的建议：

关于页面的结果如下：

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

这是_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 一段时间。

任何帮助将不胜感激。

【问题讨论】：

请不要将您的代码发布为图片。根据您的 html 代码，结果是正确的。它应该是什么样子？
@Sfili_81，感谢您的评论。我根据您的建议更新了 html 代码。如果您与第一个屏幕进行比较，您将看到 About 标题现在位于后面。我希望部分视图向下移动以显示全部内容。
由于我们看不到用于控制“关于”区域的 HTML 或 CSS，因此实际上无法识别问题。我们无法修复我们看不到的代码。
您在某处进行了更改，如果那是在 CSS 中，则在问题中包含相关的 CSS。还要准确指出您所做的更改，以便我们尝试指导您更改哪些内容。
我们需要minimal, reproducible example。另见stackoverflow.com/help/how-to-ask。让人们从一开始就在一个地方为他们提供他们需要的所有信息，从而轻松地为您提供帮助。不要让他们去做其他任务，例如创建 Visual Studio 项目，以了解您的问题。人们正在给他们空闲时间，他们想快速轻松地帮助您，而不是花时间搞砸是否生成了与您相同的代码！如果您可以轻松地帮助您，您将获得更多帮助。

标签： html css asp.net-mvc-4

【解决方案1】：

您在标题上添加了 3 个没有任何 CSS 类的 div。这是“损坏”标头的原因。它没有损坏，它只是使用 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 在 cmets 中所说的话。我们需要一个最小的、可重现的例子。当您提出任何问题时，请记住，对您来说显而易见的事情对其他人来说并不明显。

希望能帮到你。

【讨论】：