How to align the menu data on homepage bootstrap

Question

i am working on my MVConlineShop, and that's what i made so far: Question : how to align these categories on the nav bar , can you please help me? this is my CategoryLayout.cshtml PartialView:

@model IEnumerable<MVCOnlineShop.Models.Category>

@{
    ViewBag.Title = "Categories";
}
<ul>
    @foreach (var Category in Model)
    {

        <li>
            @Html.ActionLink(Category.CategoryName,
"Browse", new { Category = Category.CategoryName })
        </li>
    }
</ul>

and this is what i wrote in my _Layout.cshtml:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

    <ul class="nav navbar-nav">

           <div class="dropdown">
                    <button class="dropbtn">@Html.Partial("CategoryLayout")</button>
                <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>



</ul>
}

Answer 1

Update your Partial view page code you missed to add css class to your tag :

@model IEnumerable<MVCOnlineShop.Models.Category> 

@{ 
ViewBag.Title = "Categories"; 
} 
<ul class="nav navbar-nav"> 
@foreach (var Category in Model) 
{ 

<li> 
@Html.ActionLink(Category.CategoryName, 
"Browse", new { Category = Category.CategoryName }) 
</li> 
} 
</ul>

Answer 2

You can achieve this by adding the following to your custom css.

.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
    display: none!important;
}
.navbar-nav {
    float: none!important;
    margin: 7.5px -15px;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

This will override the media queries in the bootstrap css

Source: https://stackoverflow.com/a/21865785/7096052