J'ai essayé de rendre le logo de ma marque de barre de navigation et mon carrousel réactifs, mais rien ne semble fonctionner. Si je réduis la taille de l'écran, l'image de marque déborde sur la barre de navigation et le carrousel semble tout simplement allongé et maladroit. Mon code est ci-dessous.
HTML CAROUSEL
<nav class="navbar navbar-custom navbar-expand-lg fixed-top">
<a class="navbar-brand" href="#">
<img class="img-responsive" src="" width="30" height="50" alt="">
</a>
...
</nav>
NAVBAR HTML
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class = "carousel">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
<div class="carousel-item">
<img src="#" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h3></h3>
</div>
</div>
3 Réponses :
J'ai testé votre code en ajoutant des images et il semble que tout est configuré correctement. Mais, vous voudrez peut-être regarder comment vous avez configuré votre CSS.
Essayez d'ajouter (le CSS minifié le plus récent):
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#"><img src="https://via.placeholder.com/50" class="d-block w-100" alt="..."></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</nav>
De plus, vous pouvez mélanger différents bootstrap 4 et 3 éléments (je vois que vous avez utilisé img-responsive pour votre logo - qui n'est plus utilisé dans Bootstrap 4 c'est maintenant img-fluid ). Si tel est le cas, essayez cette barre de navigation:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
pour la barre de navigation,
ajoutez la classe navbar-dark bg-dark navbar dans la navigation.
<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar">
<a class="navbar-brand" href="#">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="nav-content" aria-expanded="true" aria-label="Toggle-navigation">
<img class="img-responsive" src="Images/img1.png" width="30" height="50" alt="">
</button>
</a>
</nav>
pour le carrousel,
rendez votre image responsive en ajoutant une classe img-fluid dans bootstrap 4 ou une classe img-responsive dans bootstrap 3
<div class="col-12">
<div id="imageCarousel" class="carousel slide" data-interval="2000">
<ul class="carousel-indicators">
<li data-target="#imageCarousel" data-slide-to="0" class="active"></li>
<li data-target="#imageCarousel" data-slide-to="1"></li>
<li data-target="#imageCarousel" data-slide-to="2"></li>
<li data-target="#imageCarousel" data-slide-to="3"></li>
</ul>
<a href="#imageCarousel" class="carousel-control-prev" data-slide="prev"><span class="carousel-control-prev-icon"></span></a>
<div class="carousel-inner" style="background-color:Gray">
<div class="carousel-item active" >
<img src="Images/jellyfish.jpg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>JellyFish</h3>
<p>JellyFish Image Description</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/Desert.jpeg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>desert</h3>
<p>Beutiful desert</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/lighthouse.jpeg" class="img-fluid mx-auto d-block" width="75%" />
<div class="carousel-caption">
<h3>Lighthouse</h3>
<p>Lighthouse Image Description</p>
</div>
</div>
<div class="carousel-item">
<img src="Images/Penguin.jpg" class="img-fluid d-block" width="75%" />
<div class="carousel-caption">
<h3>Penguin</h3>
<p>Penguin Image Description</p>
</div>
</div>
</div>
<a href="#imageCarousel" class="carousel-control-next" data-slide="next"><span class="carousel-control-next-icon"></span></a>
</div>
</div>
Êtes-vous sûr d'avoir inclus le cdn dans votre fichier d'index? Si oui, essayez d'autres trucs de bootstrap s'ils fonctionnent.
Vous devrez publier un exemple minimal illustrant le problème.
avez-vous essayé d'ajouter Viewport?
Je viens de remarquer quelque chose dans votre code. Bootstrap est un cadre d'approche mobile d'abord, vous n'avez donc pas besoin d'attribuer complètement des classes de colonnes dans vos divs. - ce div aura une largeur de 100% dans toutes les résolutions d'écran.