Question

So I want the navigation in the nav-bar to be right aligned, which works fine, but when the screen-size shrinks to where the button appears, the button doesn't work. How can that be?

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="~/logo.gif" id="logo" /></a>
        </div>
        <div class="collapse navbar-collapse navbar-right">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Page 1</a></li>
                <li><a href="#">Page 2</a></li>
                <li><a href="#">Page 3</a></li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

Learn to use the class of navbar components at Navbar component

Your code

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">

and the right code is

<div class="collapse navbar-collapse" id="myID4Collapse">
  <ul class="nav navbar-nav navbar-right">

the navbar-right must to be called into the <ul> -> <ul class="nav navbar-nav navbar-right">

and you missing the id into the div for collapse into you code

data-target="#myNavbar" -> id="#myNavbar"

see the example working

Navbar component

Navbar-right interfering with navbar-collapse

1 个答案: