CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstraprazor
Shane Siebken
Shane Siebken

Reputation: 69

<div> in navbar not aligning properly

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.

Upvotes: 0

Views: 1627

Answers (1)

vanburen
vanburen

Reputation: 21653

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>

Upvotes: 2

Related Questions