Why aren't the navigation bar menu items displaying in the twitter.bootstrap.mvc4 package sample application?

Question

I created an empty MVC4 web application project in VS2012. I then installed the http://www.nuget.org/packages/twitter.bootstrap.mvc4.sample/ nuget package. However when I run the sample application, I cannot see any of the navigation menu items in the navbar. I can only see the "Application Name" link. The other items ("Automatic Scaffolding", nested "Example Layouts" dropdown navigation menu) are hidden.

Do I need to modify the cshtml or less files in some way to get these items to display in the sample application?

Answer 1

I modified the cshtml markup in the _BootstrapLayout.basic.cshtml file to get the navigation bar items to display correctly. I used the fixed top navbar example from http://getbootstrap.com/examples/navbar-fixed-top/ as a guide.

Original (Not Working) Code:

<div class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a class="brand" href="#" title="change in _bootstrapLayout.basic.cshtml">Application Name</a>
                <div class="nav-collapse collapse">
                    <ul class="nav">
                        @Html.Navigation()
                    </ul>
                </div>
            </div>
        </div>
    </div>

New (Working) Code:

<div class="navbar navbar-default 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>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        @Html.Navigation()
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

Result: