2017-03-23 8 views
3

Ein ungewöhnliches Problem mit dem Karussell von Bootstrap 4, es funktionierte normal, dann musste ich irgendwo etwas geändert haben, versuchte es zu löschen und das gleiche Problem trat auf. Meine Pfeile sind nicht in der richtigen Position see imageBootstrap 4 Karussell

<body> 
<ul class="nav justify-content-center"> 
    <li class="nav-item"> 
    <a class="nav-link" href="index.html">Home</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link active" href="landmarks.html">Landmarks</a> 
    </li> 
    <li class="nav-item"> 
    <a class="nav-link" href="images.html">Image Gallery</a> 
    </li> 
</ul> 

<div class="container" align="center"> 
    <h1 class="display-5">Gallery</h1> 
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
    <div class="carousel-inner" role="listbox"> 
<div class="carousel-item active"> 
    <img class="d-block img-fluid" src="beach.jpg" alt="First slide"> 
</div> 
<div class="carousel-item"> 
    <img class="d-block img-fluid" src="lake.jpg" alt="Second slide"> 
</div> 
<div class="carousel-item"> 
    <img class="d-block img-fluid" src="martyrsquare.jpg" alt="Third slide"> 
</div> 
</div> 
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
<span class="carousel-control-prev-icon" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
<span class="carousel-control-next-icon" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 
</div> 

Die winzige Menge von CSS Ich habe nichts davon beeinflussen würde aber nur für den Fall

.row{ 
    padding: 20px; 
} 

body{ 
    background-color: #e5e5e5; 
} 
+0

tritt dies bei jedem Bild auf? –

+0

@DavidLee ja, aber nur innerhalb dieses Karussells – Donald

+0

[Diese Antwort] (http://Stackoverflow.com/a/42187081/5128464) half mir, ein ähnliches Problem zu lösen – vlp

Antwort

2

Die Pfeile scheinen im Recht zu sein Ort. Es scheint so, als ob deine Bildgröße dafür verantwortlich ist, dass sie fehl am Platz wirkt.

Versuchen Sie, die folgende Klasse zu Ihrem CSS hinzuzufügen.

.carousel-item img { 
    width: 100%; 
} 
+0

Das scheint es behoben zu haben, aber jetzt dehnen sich die Bilder ein Höhe in unteren Fenstergrößen – Donald

+0

Ich nehme an, Sie haben einen fest codierten Wert auf die img-Höhen eingestellt. Bist du offen dafür, an den Seiten des Bildes Platz zu haben? –

+0

haben keine fest codierten Werte für IMG-Höhen, möchten keinen Platz auf den Seiten haben – Donald