<div>在导航栏中无法正确对齐

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>
                            <a href="@Url.Action("Index", "WidgetPage")" class="navbar-link">@page.Title  </a>
                            <a href="@Url.Action("Edit", "WidgetPage", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"></span></a>
                            <a href="@Url.Action("Delete", "WidgetPage", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span></a>
                            </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">
                                <a href="@Url.Action("Index","WidgetPage",new { id = @page.Id })" class="navbar-link">@page.Title</a>
                                <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"><a href="@Url.Action(" Index ", "WidgetPage ")" class="navbar-link">This is a Title </a> </li> <li class="edit"><a href="@Url.Action(" Edit ", "WidgetPage ", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-pencil" role="button"></span></a> </li> <li class="edit"><a href="@Url.Action(" Delete ", "WidgetPage ", new { id = page.Id })" class="navbar-link"><span class="glyphicon glyphicon-remove" role="button"></span></a> </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"><a href="#" class="navbar-link">This is a Title </a> <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>