bootsrap Navigationsleiste kann nicht zusammengeklappt werden

Question

Aug 01, 2016, 08:35 PM

bootsrap Navigationsleiste kann nicht zusammengeklappt werden

Ich entwickle eine Angularjs-Anwendung und möchte sie plattformübergreifend gestalten, damit ich Bootsrap verwenden kann. Ich habe eine Vorlage gefunden, der ich folgen möchte. https: //blackrockdigital.github.io/startbootstrap-business-frontpage/) Das Problem ist, dass ich die Navigationsleiste transformieren möchte, wenn die Bildschirmgröße kleiner ist.

Aber ich weiß nicht, was ich vermisse, weil es die Umwandlung in eine Schaltfläche korrekt ausführt, aber die Schaltfläche dann nicht anklickbar ist, so dass die Optionen 'inicio', 'servicios' und 'contacto' nicht erreichbar sind.

Jede Hilfe wäre fantastisch, hier haben Sie die CSS- und HTML-Dateien:

HTML

<!DOCTYPE html>
<html ng-app="home">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HOME</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-resource.js"></script>   

        <link href="/web/resources/css/business-frontpage.css" rel="stylesheet" />
        <script src="/web/resources/js/home/home-service.js"></script>
        <script src="/web/resources/js/home/home-controller.js"></script>
        <script src="/web/resources/js/home/home-app.js"></script>
        <script src="/web/resources/lib/translate/angular-translate.js"></script>
        <script src="/web/resources/js/generic/urlLanguageStorage.js"></script>
        <script src="/web/resources/lib/translate/angular-translate-loader-url.min.js"></script>

    </head>

    <body>

               <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <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-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a ui-sref="home" translate>navegacion.inicio</a>
                    </li>
                    <li>
                        <a ui-sref="servicios" translate>navegacion.servicios</a>
                    </li>
                    <li>
                        <a ui-sref="contacto" translate>navegacion.contacto</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

    <!-- Image Background Page Header -->
    <!-- Note: The background image is set within the business-casual.css file. -->
    <header class="business-header">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1><a class="tagline" ui-sref="home" translate>titulo.alergenos</a></h1>
                </div>
            </div>
        </div>
    </header>


<div class="container">
    <div ui-view></div> 
</div>



<div class="container">
<!-- Footer -->
        <footer>
            <div class="row">
                <div class="col-lg-12">
                    <p>Copyright &copy; Your Website 2014</p>
                </div>
            </div>
            <!-- /.row -->
        </footer>
</div>

    </body>
</html>

CSS

/*
 * Start Bootstrap - Business Frontpage (http://startbootstrap.com/)
 * Copyright 2013-2016 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
 */

body {
    padding-top: 50px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
}

/* Header Image Background - Change the URL below to your image path (example: ../images/background.jpg) */

.business-header {
    height: 400px;
    background: url('http://placehold.it/1920x400') center center no-repeat scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

/* Customize the text color and shadow color and to optimize text legibility. */

.tagline {
    text-shadow: 0 0 10px #000;
    color: #fff;
}

.img-center {
    margin: 0 auto;
}

footer {
    margin: 50px 0;
}

EDIT Ich habe ein Jsfidlle erstellthttps: //jsfiddle.net/txominsirera/v8ups1hc