Bootstrap Image manquant texte/indicateurs manquant sur le petit écran

J'ai un carrousel Bootstrap qui est très bien sur un grand écran, mais si je réduis la taille de l'écran, les indicateurs se déplacent sous l'image et je perds complètement le titre. J'ai dû louper quelque chose. Je veux avoir les indicateurs et le texte à travers l'image comme avec un plus grand écran. Toute aide appréciée ...Bootstrap Image manquant texte/indicateurs manquant sur le petit écran

<div class="container" id="index"> 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
    <div class="carousel-caption"> 
     <h3>Example headline</h3> 
     <p>Example description</p> 
     </div> 
     <img src="img/lesson8-portfolioheroimage2.jpg" alt="..."> 

    </div> 


    <div class="item"> 
     <img src="img/portfolioheroimage.jpg" alt="..."> 
     <div class="carousel-caption"> 
     <h3>Example headline</h3> 
     <p>Example description</p> 
     </div> 
    </div> 
    <div class="item"> 
     <img src="img/portfolioheroimage3.jpg" alt="..."> 
     <div class="carousel-caption"> 
     <h3>Example headline</h3> 
     <p>Example description</p> 
     </div> 
    </div> 
    </div> 

    <!-- Controls --> 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 
</div>

Source

2017-09-27 James

Voici mon CSS si ce .carousel aide { \t margin-left: -15px; \t marge droite: -15px; } .carousel-interne { \t hauteur: 400px; } .carousel-légende { \t rembourrage-bas: 450px; .carousel-control { \t marge: 200px 0; } – James

https://bootsnipp.com/snippets/featured/simple-responsive-carousel C'est un exemple de carrousel réactive Bootstrap. Vous avez le CSS et le code HTML. – F0XS

C'est parce que l'image dans le carrousel se redimensionnée en fonction de son rapport d'aspect lorsque vous redimensionnez la taille de l'écran.

supprimer .carousel-control { margin: 200px 0; } et pour .carousel-caption au lieu de donner padding-bottombottom dans % et l'ajuster selon vos besoins en media queries.

Ajoutez aussi ce css

.carousel-inner .item{ 
    height: 100%; 
} 
.carousel-inner .item img { 
    width: 100%; 
    height: 100% !important; 
    object-fit: cover; 
}

.carousel { margin-left: -15px; margin-right: -15px; } 
 
.carousel-inner{ height: 400px; } 
 
.carousel-caption { bottom: 30% !important; } 
 
.carousel-inner .item{ 
 
    height: 100%; 
 
} 
 
.carousel-inner .item img { 
 
    width: 100%; 
 
    height: 100% !important; 
 
    object-fit: cover; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Bootstrap Example</title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    
 
</head> 
 
<body> 
 

 
<div class="container" id="index"> 
 
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 
 

 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
 
    <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
 
    </ol> 
 

 
    <!-- Wrapper for slides --> 
 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
    <div class="carousel-caption"> 
 
     <h3>Example headline</h3> 
 
     <p>Example description</p> 
 
     </div> 
 
     <img src="http://placehold.it/200x200" alt="..."> 
 

 
    </div> 
 

 

 
    <div class="item"> 
 
     <img src="http://placehold.it/200x200" alt="..."> 
 
     <div class="carousel-caption"> 
 
     <h3>Example headline</h3> 
 
     <p>Example description</p> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img src="http://placehold.it/200x200" alt="..."> 
 
     <div class="carousel-caption"> 
 
     <h3>Example headline</h3> 
 
     <p>Example description</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <!-- Controls --> 
 
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 
 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
 
    <span class="sr-only">Previous</span> 
 
    </a> 
 
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 
 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
 
    <span class="sr-only">Next</span> 
 
    </a> 
 
</div> 
 
</body> 
 
</html>

Source

2017-09-27 11:38:02

Merci! Semble fonctionner parfaitement. Je n'aurais jamais eu ça tout seul! À votre santé. – James

En fait, puis-je demander ... ce qui fait que l'image sur un grand écran remplit la page, alors que je voulais que la hauteur soit moindre. Essayé de modifier le CSS mais rien ne se passe, des idées? – James

Désolé, je ne suis pas clair avec votre question. Signifie que vous voulez que l'image ait 100% de la largeur de l'écran et de la hauteur restreinte? –

Bootstrap Image manquant texte/indicateurs manquant sur le petit écran

Répondre

Questions connexes