导航栏中的 <div> 未正确对齐答案

【问题标题】：<div> in navbar not aligning properly导航栏中的 <div> 未正确对齐
【发布时间】：2015-10-18 10:12:38
【问题描述】：

我正在使用基本的引导 css，没有进行任何更改，并且我在 ASP.NET MVC 的 Razor 视图中有以下 html：

<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>

我所有的导航链接都正常工作 - 但是，导航栏的对齐方式与我的期望和想要的不一致。我最终得到的是http://puu.sh/kN0NJ/ea996c060b.png，而我希望得到的只是所有在同一行上对齐的项目。

更新：我的内容文件夹中有以下 CSS：

.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;
      }
  }

使用以下 Razor View 代码：

<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>

但我仍然以堆叠按钮结束。对于正在发生的事情，我真的很茫然。

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap razor

【解决方案1】：

您的 HTML 结构已关闭（除非您尝试在默认值或下拉菜单之外执行某些操作？）。 Docs

您在一个 li 元素中有两次 navbar-collapse 和多个 href's。

更新：

您可以将自定义类添加到其中包含图标的列表项以调整填充，然后使用媒体查询使它们在移动视口上保持内联。

查看更新的示例。

/**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>

【讨论】：

啊，指出嵌套的导航栏折叠是正确的。我错过了。但是，我试图让铅笔和删除字形图标（及其相关操作）非常靠近页面标题，因为它们旨在作为每个页面标题的编辑/删除。将每个用作单独的li 会使整个条形的间距均匀，这不是我想要的。编辑：感谢关于如何让 html 代码在堆栈溢出讨论中运行的好例子——我会确保在未来这样做。
看起来不错。我没有保存第一次编辑 - 您介意简要说明您所做的更改吗？我对 C# 有经验，但对 Razor、html 和 css 大多是新手，所以有很多东西要学。谢谢！
如果您想查看结构上的差异，只需前往 Docs 并从 navbar-nav 类向下比较您的。我对默认结构所做的唯一更改是将一个名为“edit”的自定义类添加到应该更靠近的链接中（以及一个类到导航栏，因此核心 CSS 不会直接更改）。这是调整 768 像素以上视口两侧的填充（即导航更改为移动设备的位置）的问题，然后一旦导航低于 768 像素，我将应用显示属性以保持链接连续，同时调整移动设备的填充。
听起来你在正确的轨道上，但我确实在答案片段（第二个导航栏）中添加了一个额外的更新，这可能有助于或更接近你最初设定的目标。
首先想到的是，如果您使用答案中的确切 CSS，您是否将此类（导航栏编辑）应用到导航栏？