Bootstrap links und rechts Glyphicons nicht im Karussell angezeigt?

Die beiden linken und rechten Chevron Glyphicon zeigen nicht, es funktioniert, aber es zeigt eine quadratische Box aus irgendeinem Grund. Wenn ich auf die Positionen klicke, wo sich die Glyhicons befinden, kann ich durch Bilder blättern, so dass alles, was nicht stimmt, das Aussehen der Glyphicons ist, die der normalerweise erwartete linke und rechte Pfeil nicht zeigt?Bootstrap links und rechts Glyphicons nicht im Karussell angezeigt?

<!DOCTYPE html> 
<html> 
<head> 
    <title>Student Association</title> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
</head> 
<body> 
    <div class="carousel slide" data-ride="carousel" id="carousel-ex"> 
     <ol class="carousel-indicators"> 
      <li class="active" data-slide-to="0" data-target="#carousel-ex"></li> 
      <li data-slide-to="1" data-target="#carousel-ex"></li> 
      <li data-slide-to="2" data-target="#carousel-ex"></li> 
      <li data-slide-to="3" data-target="#carousel-ex"></li> 
      <li data-slide-to="4" data-target="#carousel-ex"></li> 
      <li data-slide-to="5" data-target="#carousel-ex"></li> 
     </ol> 
     <div class="carousel-inner"> 
      <div class="item active"><img alt="abuja" class="img-responsive" id= 
"afCountries" src="img/african-countries/abuja-nigeria.jpg"> 
       <div class="carousel-caption"> 
        <h3>Abuja, Nigeria</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="accra" class="img-responsive" id="afCountries" src= 
"img/african-countries/accra-ghana.jpg"> 
       <div class="carousel-caption"> 
        <h3>Accra, Ghana</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kigali" class="img-responsive" id="afCountries" 
src="img/african-countries/kigali-rwanda.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kigali, Rwanda</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="durban" class="img-responsive" id="afCountries" 
src="img/african-countries/durban-southafrica.jpg"> 
       <div class="carousel-caption"> 
        <h3>Durban, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="Johannesburg" class="img-responsive" id= 
"afCountries" src="img/african-countries/Johannesburg-South_Africa.jpg"> 
       <div class="carousel-caption"> 
        <h3>Johannesburg, South Africa</h3> 
       </div> 
      </div> 
      <div class="item"><img alt="kenya" class="img-responsive" id="afCountries" src= 
"img/african-countries/kenya.jpg"> 
       <div class="carousel-caption"> 
        <h3>Kenya</h3> 
       </div> 
      </div> 
     </div> 
     <a class="left carousel-control" data-slide="prev" href= 
"#carousel-ex"><span class="glyphicon glyphicon-chevron-left"></span></a> 
     <a class="right carousel-control" data-slide="next" href= 
"#carousel-ex"><span class= 
"glyphicon glyphicon-chevron-right"></span></a> 
    </div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script> 
    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">   </script> 
</body> 
</html>

Quelle

2014-12-18 user2668069

Sorry, war ich Problem zu reproduzieren, nicht in der Lage. Ich habe versucht, das Problem bei Bootply zu reproduzieren: http://www.bootply.com/x9VUw3LOO6 mit verschiedenen Bildern. Ich habe einige Bilder mit verschiedenen Größen zum Testen gegoogelt, aber das einzige Mal, wo ich ein paar quadratische Kästchen im Karussell hatte, war, als das Bild nicht gefunden wurde (ich hatte die falsche URL-Adresse für das Bild). Wenn also jemand entscheidet, sich den Bootply-Test anzuschauen, dann seien Sie sich bitte bewusst, dass diese Bilder von mir (schnell) ausgewählt wurden. – jyrkim

Ähnlich Jyrkim, Ihre Lösung funktioniert zum Beispiel Editoren wie Bootply und JSFiddle. Mein einziger Gedanke ist, dass Sie den Fonts-Abschnitt Ihres Bootstrap-Ordners vermissen. White Squares ist ein Platzhalter für ein Zeichen, das nicht in der aktuellen Schriftart gefunden werden kann, wie ein Sonderzeichen in einer benutzerdefinierten Schriftart. Es kann so dargestellt werden als [] anstelle von etwas wie * oder &. Stellen Sie sicher, dass Ihre Ordnerstruktur in Bootstrap wird wie folgt festgelegt:

bootstrap 
-> css 
    -> bootstrap-theme.css 
    -> bootstrap-theme.css.map 
    -> bootstrap-theme.min.css 
    -> bootstrap.css 
    -> bootstrap.min.css 
    -> theme.css 
-> fonts 
    -> glyphicons-halflings-regular.eot 
    -> glyphicons-halflings-regular.svg 
    -> glyphicons-halflings-regular.ttf 
    -> glyphicons-halflings-regular.woff 
-> js 
    -> bootstrap.js 
    -> bootstrap.min.js

ich Geld wetten würde, dass die fonts Ordner nicht vorhanden ist, oder nicht ordnungsgemäß verbunden. Wenn Ihre Ordnerstruktur die gleiche wie oben ist, können Sie die CSS-Datei verknüpfen wie folgt:

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

Hoffnung, das hilft!

Hinweis

Mit der CDN-Version des Stylesheet verursacht dies kein Problem sein, aber kann die Ladezeit erhöhen.

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

Quelle

2014-12-18 21:51:41

Gern geschehen, froh, dass ich helfen konnte! –

Bootstrap links und rechts Glyphicons nicht im Karussell angezeigt?

Antwort

Verwandte Themen