<div> in navbar not aligning properly - html

Question

I'm using the basic bootstrap css with nothing altered, and I have the following html in a Razor View in ASP.NET MVC:
<nav 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">
#if (ViewBag.WidgetPages != null)
{
foreach (WidgetPage page in ViewBag.WidgetPages)
{
<li class="navbar-collapse"><div>
#page.Title
<span class="glyphicon glyphicon-pencil" role="button"></span>
<span class="glyphicon glyphicon-remove" role="button"></span>
</div>
</li>
}
}
<li><a href="#Url.Action("Create", "WidgetPage")">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</nav>
All my navigation links are working just as they should - however, the alignment of the navigation bar is off from what I expect and want. What I'm ending up with is http://puu.sh/kN0NJ/ea996c060b.png, and what I'm hoping to get is simply all of the items aligned on the same line.
Update: I have the following CSS in my content folder:
.navbar.navbar-edit .navbar-nav li.edited .edit-link a {
color: #fff;
}
.navbar.navbar-edit .navbar-nav li.edited .edit-link a:hover {
color: #ccc;
}
.navbar.navbar-edit .navbar-nav li.edited a {
display: inline-block;
position: relative;
padding-right: 4px;
padding-left: 4px;
}
.navbar.navbar-edit .navbar-nav .edit-link{
padding-left: 4px;
padding-right: 4px;
}
#media (max-width: 767px){
.navbar.navbar-edit .navbar-nav li.edited a{
padding-left: 15px;
}
}
with the following Razor View code:
<nav class="navbar navbar-inverse navbar-edit 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="collapse navbar-collapse">
<ul class="nav navbar-nav">
#if (ViewBag.WidgetPages != null)
{
foreach (WidgetPage page in ViewBag.WidgetPages)
{
<li class="edited">
#page.Title
<span class="edit-link"><a href="#Url.Action("Edit", "WidgetPage", new { id = #page.Id })" class="navbar-link">
<span class="glyphicon glyphicon-pencil" role="button"></span></a></span>
<span class="edit-link">
<a href="#Url.Action("Delete", "WidgetPage", new { id = #page.Id })" class="navbar-link">
<span class="glyphicon glyphicon-remove" role="button"></span>
</a>
</span>
</li>
}
}
<li>
<a href="#Url.Action("Create", "WidgetPage")">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
</div>
#Html.Partial("_LoginPartial")
</div>
</nav>
but I'm still ending up with the stacked buttons. I'm really at a loss here for what is happening.

Answer 1

Your HTML structure is off (unless you're trying to do something outside of the defaults or maybe a dropdown?). Docs
You have navbar-collapse twice and multiple href's inside one li element.
UPDATE:
You can add a custom class to the list items with Icons inside them to adjust the padding and then use media queries to have them remain inline on mobile viewports.
See updated example.
/**BELOW NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-custom li.edit span {
color: #eee;
}
.navbar.navbar-custom li.edit span:hover {
color: #ccc;
}
/**ABOVE NOT REQUIRED, ONLY FOR CONTEXT**/
#media (min-width: 768px) {
.navbar.navbar-custom li.edit a {
padding-left: 4px;
padding-right: 4px;
}
}
#media (max-width: 767px) {
.navbar.navbar-custom li.edit {
display: table-cell;
}
.navbar.navbar-custom li.edit a {
padding-right: 4px;
}
}
/**UPDATED NAVBAR RULES - LOOP**/
/**BELOW NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-edit .navbar-nav li.edited .edit-link a {
color: #fff;
}
.navbar.navbar-edit .navbar-nav li.edited .edit-link a:hover {
color: #ccc;
}
/**ABOVE NOT REQUIRED, ONLY FOR CONTEXT**/
.navbar.navbar-edit .navbar-nav li.edited a {
display: inline-block;
position: relative;
padding-left: 4px;
padding-right: 4px;
}
.navbar.navbar-edit .navbar-nav .edit-link {
padding-left: 4px;
padding-right: 4px;
}
#media (max-width: 767px) {
.navbar.navbar-edit .navbar-nav li.edited a {
padding-left: 15px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-1">
<ul class="nav navbar-nav">
<li class="edit">This is a Title
</li>
<li class="edit"><span class="glyphicon glyphicon-pencil" role="button"></span>
</li>
<li class="edit"><span class="glyphicon glyphicon-remove" role="button"></span>
</li>
<li>
<a href="#Url.Action(" Create ", "WidgetPage ")">
<span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<hr>
<div class="alert alert-info">
<h3>Updated NAVBAR</h3>
</div>
<nav class="navbar navbar-inverse navbar-edit">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-2" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-2">
<ul class="nav navbar-nav">
<li class="edited">This is a Title
<span class="edit-link"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"> </span>
</a>
</span> <span class="edit-link"><a href="#" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span>
</a>
</span>
</li>
<li>
<a href="#"> <span class="glyphicon glyphicon-plus"></span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>