Bootswatch Cosmo Nav funktioniert nicht

-2

Ich habe ihre bootstrap.mini.css und bootstrap.css Dateien ersetzt und sie sind verknüpft. Die Navigation klappt gut, aber das Dropdown-Menü funktioniert nicht. Jquery und die Bootstrap-Javascript-Dateien sind im Lieferumfang enthalten und ich weiß, dass dies funktioniert, denn wenn ich den Browser verkleinere, funktionieren die 3bars nur die Dropdown-Nav-Registerkarte funktioniert nicht.Bootswatch Cosmo Nav funktioniert nicht

Jede Hilfe beim Lösen.

HTML:

<?php 
include('../includes/dbconfig.php'); 
include('../includes/settings.php'); 
include('../includes/functions.php'); 
?> 
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title><?php echo $site_name; ?></title> 
    <link rel="stylesheet" href="assets/css/bootstrap.css"> 
    <link rel="stylesheet" href="assets/css/bootstrap.mini.css"> 
    <link rel="stylesheet" href="assets/css/variables.less"> 
    <link rel="stylesheet" href="assets/css/bootswatch.less"> 
</head> 
<body> 
<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" 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> 
      <a class="navbar-brand" href="index.php"><?php echo $site_name; ?></a> 
     </div> 

     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
         <li class="divider"></li> 
         <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
      </ul> 
      <form class="navbar-form navbar-left" role="search"> 
       <div class="form-group"> 
        <input type="text" class="form-control" placeholder="Search"> 
       </div> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">Link</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 
<script src="assets/js/jquery.js"></script> 
<script src="assets/js/bootstrap.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
</body> 
</html>

Quelle

2017-09-06 Jarrod Estepp

i hinzufügen, haben einige Link bitte überprüfen Sie es voll helfen

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 

 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" 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> 
 
      <a class="navbar-brand" href="index.php"><?php echo $site_name; ?></a> 
 
     </div> 
 

 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
      <ul class="nav navbar-nav"> 
 
       <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
       <li><a href="#">Link</a></li> 
 
       <li class="dropdown"> 
 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
        <ul class="dropdown-menu" role="menu"> 
 
         <li><a href="#">Action</a></li> 
 
         <li><a href="#">Another action</a></li> 
 
         <li><a href="#">Something else here</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">Separated link</a></li> 
 
         <li class="divider"></li> 
 
         <li><a href="#">One more separated link</a></li> 
 
        </ul> 
 
       </li> 
 
      </ul> 
 
      <form class="navbar-form navbar-left" role="search"> 
 
       <div class="form-group"> 
 
        <input type="text" class="form-control" placeholder="Search"> 
 
       </div> 
 
       <button type="submit" class="btn btn-default">Submit</button> 
 
      </form> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
       <li><a href="#">Link</a></li> 
 
      </ul> 
 
     </div> 
 
    </div> 
 
</nav>

Quelle

2017-09-06 19:49:51

Diese Links hat es funktioniert, aber ich versuche, http://bootswatch.com zu verwenden, die eigene benutzerdefinierte Bootstrap-CSS-Dateien hat, die bearbeitet wurden . –

Das hat geholfen. Ich fügte dieses oben bootswatch css Dateien hinzu und es funktioniert jetzt tadellos; D –

Manchmal ist es schwer, welcher Teil des nav zu beschmutzen nicht funktioniert , würde ich einen Beispielcode als den folgenden nehmen und ändern, wo erforderlich. Auf diese Weise ist die Funktionalität, die Sie benötigen, bereits vorhanden und mit einigen kleineren Änderungen sollten Sie eine voll funktionsfähige Navigationsleiste haben.

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> 
    <a class="navbar-brand" href="#">Fixed navbar</a> 
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 
    <div class="collapse navbar-collapse" id="navbarCollapse"> 
    <ul class="navbar-nav mr-auto"> 
     <li class="nav-item active"> 
     <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link" href="#">Link</a> 
     </li> 
     <li class="nav-item"> 
     <a class="nav-link disabled" href="#">Disabled</a> 
     </li> 
    </ul> 
    <form class="form-inline mt-2 mt-md-0"> 
     <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> 
     <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
    </form> 
    </div> 
</nav>

Sie können den Beispielcode here finden.

EDIT:

bootstrap.min.css erste und die bootswatch Dateien, nachdem sie hinzufügen.

Dieser Code bei bootswatch mit arbeiten:

<nav role="navigation" class="navbar navbar-inverse"> 
    <!-- Brand and toggle get grouped for better mobile display --> 
    <div class="navbar-header"> 
     <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href='#' class="navbar-brand">LOGO</a> 
    </div> 
    <!-- Collection of nav links and other content for toggling --> 
    <div id="navbarCollapse" class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li> 
       <a href="https://mail.google.com"> 
        [email protected] 
       </a> 
      </li> 
     </ul> 
    </div> 
</nav>

Quelle

2017-09-06 19:50:35

Dieser Beispielcode ist von der bootstrap Website. Ich benutze http://bootswatch.com –

Sie haben wahrscheinlich das Bootstrap-4-Tag versehentlich hinzugefügt. Bootswatch ist nur ein Thema, es ist immer noch Bootstrap und die gleichen Klassen gelten. Bootswatch-Themes verwenden Bootstrap v3. Seien Sie sich also bewusst, wenn Sie Bootstrap 4 verwenden, können viele Probleme auftreten. –

Das Modal funktioniert jetzt nicht. Es wird nicht angezeigt :( –

Bootswatch Cosmo Nav funktioniert nicht

Antwort

Verwandte Themen