Ya no busques más por todo internet ya que estás al lugar necesario, contamos con la respuesta que necesitas sin problema.
Solución:
Demostración: http://jsfiddle.net/u1s62Lj8/1/
Necesita los archivos jQuery y Boostrap Javascript incluidos en su página HTML para que funcione la alternancia. (Asegúrese de incluir jQuery antes de Bootstrap).
// stylesheets here
//your html code here
// js scripts here
// note jquery tag has to go before boostrap
Su código se ve muy bien, lo único que veo es que no incluyó la clase colapsada en su selector de botones. http://www.bootply.com/cpHugxg2f8 Nota: Requiere el complemento de JavaScript Si JavaScript está deshabilitado y la ventana gráfica es lo suficientemente estrecha como para que la barra de navegación se colapse, será imposible expandir la barra de navegación y ver el contenido dentro de .navbar-collapse.
La barra de navegación receptiva requiere que se incluya el complemento de colapso en su versión de Bootstrap.
Recuerda cargar jquery antes de bootstrap js
Recuerda que puedes compartir este post si te fue útil.