CSS issue with MVC project

Question

I just created a MVC as Mirosoft suggestion:

And the result of About page looks like:

But when I want to extend more header, the layout was broken as below:

Here is the code in _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>

Can anyone help me to solve this issue? what is the root cause? I'm just studying the MVC for a while.

Any help would be greatly appreciated.

Answer 1

You added 3 divs without any css class on your header. This is the cause of the "broken" header. Its not broken, its just use the default behavior of a div element.

If you remove this 3 divs your layout will be normal again.

 <div>
     Expend
 </div>

If will want to add new items to your header menu you need to add hte new items inside the <ul class="nav navbar-nav"> like below

<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

I would like to reinforce what ADyson said in the comments. We need a minimal, reproducible example. Please when you ask any question remember that what is obvious to you is not obvious to other people.

Hope I'd helped you.