Solución:
Tuve un problema similar. Revisé el HTML varias veces y estaba seguro de que era correcto. Luego comencé a jugar con el orden de jquery y bootstrap javascript.
Originalmente tenía bootstrap.min.js cargándose ANTES de jquery.min.js. En este estado, el menú no se expandiría al hacer clic en el icono del menú.
Luego cambié el orden para que bootstrap.min.js viniera después de jquery.min.js, y esto resolvió el problema. No sé lo suficiente sobre javascript para explicar por qué esto causó el problema (o lo solucionó), pero eso es lo que funcionó para mí.
Información adicional:
Ambos guiones se encuentran en la parte inferior de la página, justo antes de la etiqueta. Ambos scripts están alojados en CDN, no alojados localmente.
Si estás bastante seguro de que tu código es correcto, pruébalo.
Necesitas cambiar en este marcado
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar collapse">
cambiar el
data-target=".navbar collapse"
para
data-target=".navbar-collapse"
Razón: el valor de data-target es un nombre de cualquier clase del div de navegación asociado. En este caso lo es
<div class="collapse navbar-collapse"> <-- Look at here
<ul class="nav navbar-nav navbar-right">
.....
</div>
Demostración de Js Fiddle
En <body> deberías tener dos <script> etiquetas:
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="js/bootstrap.js"></script>
El primero cargará jQuery desde la CDN, y el segundo cargará el Javascript de Bootstrap desde un directorio local (en este caso es un directorio llamado js).