MVC 項目的 CSS 問題

Question

我剛剛創建了一個 MVC 作為 Mirosoft 的建議：

關於頁面的結果如下所示：

但是當我想擴展更多 header 時，布局被破壞如下：

這是 _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

您在 header 上添加了 3 個沒有任何 css class 的 div。 這就是“壞”header 的原因。 它沒有損壞，它只是使用 div 元素的默認行為。

如果您刪除這 3 個 div，您的布局將再次正常。

 <div>
     Expend
 </div>

如果要向 header 菜單添加新項目，則需要在<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>

This layout uses bootstrap 3. If you want to customize it the first thing you should learn is the minimum of html and css and then bootstrap 3. To learn bootstrap 3 you can use the w3schools tutorial: https://www.w3schools.com /bootstrap/default.asp

我想強調阿迪森在評論中所說的話。 我們需要一個最小的、可重現的例子。 當你問任何問題時，請記住，對你來說顯而易見的事情對其他人來說並不明顯。

希望我能幫助你。