Pour une raison quelconque, ces colonnes s'empilent verticalement plutôt qu'horizontalement:
#logos {
display: flex;
align-items: center;
margin-top: -25px;
margin-bottom: 10px;
}
#tidal {
display: block;
width: 5%;
float: none;
margin: 0 auto;
}
#apple {
display: block;
width: 5%;
float: none;
margin: 0 auto;
}
#spotify {
display: block;
float: none;
margin: 0 auto;
width: 4%;
}
#pandora {
display: block;
float: none;
margin: 0 auto;
width: 9%;
}
Je ne sais pas ce qu'il faut faire ici. Mes règles CSS:
<div id="logos" class="row justify-content-center align-items-center">
<div class="col-xs-3">
<a href="https://listen.tidal.com/album/107846023">
<img class="img-fluid" id="tidal" src={tidal} alt=""></img>
</a>
</div>
<div class="col-xs-3">
<a href="https://geo.music.apple.com/us/album/_/1460176267?mt=1&app=music&at=1000lHKX">
<img class="img-fluid" id="apple" src={apple} alt=""></img>
</a>
</div>
<div class="col-xs-3">
<a href="https://open.spotify.com/album/6ITBoE1l1zPCtXKOTN12IC">
<img class="img-fluid" id="spotify" src={spotify} alt=""></img>
</a>
</div>
<div class="col-xs-3">
<a href="https://www.pandora.com/artist/various-artists/love-hart-presents-hartfm-explicit/AL2V7Pb7xcg7p74">
<img class="img-fluid" id="pandora" src={pandora} alt=""></img>
</a>
</div>
</div>
J'ai tout essayé avec le redimensionnement, mais rien ne semble fonctionner. Je ne sais pas si cela a à voir avec le style, mon code Bootstrap ou quoi.
4 Réponses :
La raison pour laquelle cela ne fonctionne pas est très simple: il n'y a pas de classe .col-xs-3 dans Bootstrap, elle est donc conçue comme une div normale.
Vous avez 5 options:
col-* col-sm-* col-md-* col-lg-* col-xl-*
Utilisez simplement l'un de ces points de rupture et cela résoudra votre problème.
Plus d'informations: DOCUMENTATION
Vous avez une idée de la raison pour laquelle ils apparaissent très gros en vue mobile?
votre grille ne sera appliquée qu'aux très petits appareils car vous ne mentionnez que la classe xs de la grille et je pense que vous testez cela sur le bureau.
j'ai donc supprimé tout ce que vous css et j'ai simplement ajouté des classes de grille pour les appareils plus grands et moyens et un appareil plus petit.
remplacez votre ligne où vous avez mentionné les colonnes par cette ligne.
+--------------+---------------+--------------+ | device | device sizes | column class | +--------------+---------------+--------------+ | Extra_small | [< 576px] | : col- | | Small | [≥ 576px] | : col-sm- | | Medium | [≥ 768px] | : col-md- | | Large | [≥ 992px] | : col-lg- | | Extra_large | [≥ 1200px] | : col-xl- | +--------------+---------------+--------------+
Cette ligne affichera votre grille dans tous les appareils même 1 ligne - 4 colonnes.
Et si vous ne voulez pas donner une taille de colonne spécifique, vous pouvez également spécifier col seulement, cela divisera automatiquement votre ligne en colonnes.
Disposition de la grille Bootstrap:
<div class="col-md-3 col-lg-3 col-sm-3 col-xl-3">
Voici codepen avec exemple.
Il n'y a pas de classe col-xs- * dans Bootstrap. Le plus petit est col-sm- * .
Au fait, si vous utilisez le même nombre de colonnes sur chaque point d'arrêt, comme dans votre exemple, vous pouvez simplement écrire col-sm-3 :)
oui je le sais mais pour qu'il comprenne, je l'ai mentionné.
Vous avez une idée de la raison pour laquelle les images apparaissent beaucoup plus grandes en vue mobile?
Dans mon exemple ou le vôtre.
@BlahZayBlahZay donne simplement la propriété col de la grille d'amorçage et cela donnera également la grille que vous voulez en vue mobile.
Je l'ai essayé avec mon code et ça marche, mais les images sur mobile sont trop grandes
laissez-moi vérifier, c'est peut-être votre css où se situe le problème
non dans mon exemple et avec votre css exact, il n'y a aucun changement, cela donne la même vue dans toutes les tailles. Vérifiez mon stylo.
J'ai supprimé display flex de la #tidal car la classe .row a display flex elle-même et changé le col-xs en col-sm depuis qu'il a été supprimé il bootstrap 4 , De plus, la balise
,
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div id="logos" class="row justify-content-center align-items-center">
<div class="col-sm-3">
<a href="https://listen.tidal.com/album/107846023">
<img class="img-fluid" id="tidal" src="http://placehold.it/256x256" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="https://geo.music.apple.com/us/album/_/1460176267?mt=1&app=music&at=1000lHKX">
<img class="img-fluid" id="apple" src="http://placehold.it/256x256" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="https://open.spotify.com/album/6ITBoE1l1zPCtXKOTN12IC">
<img class="img-fluid" id="spotify" src="http://placehold.it/256x256" alt="">
</a>
</div>
<div class="col-sm-3">
<a href="https://www.pandora.com/artist/various-artists/love-hart-presents-hartfm-explicit/AL2V7Pb7xcg7p74">
<img class="img-fluid" id="pandora" src="http://placehold.it/256x256" alt="">
</a>
</div>
</div>
</div>
#tidal {
display: block;
width: 5%;
float: none;
margin: 0 auto;
}
#apple {
display: block;
width: 5%;
float: none;
margin: 0 auto;
}
#spotify {
display: block;
float: none;
margin: 0 auto;
width: 4%;
}
#pandora {
display: block;
float: none;
margin: 0 auto;
width: 9%;
}
Vous avez une idée de la raison pour laquelle les images apparaissent très grandes en vue mobile?
@BlahZayBlahZay, vous aurez besoin de points d'arrêt manuels pour la largeur de l'image, d'après ce que j'ai pu voir, la largeur: 4% fait paraître les images plus grandes en vue mobile,
En fait, donc sur le bureau, lorsque je rétrécis l'écran du navigateur, les images s'empilent verticalement plutôt qu'horizontalement. Je ne sais pas pourquoi cela se produit.
NVM, je l'ai je pense
Je pense que vous voulez le code pour le système de grille Bootstrap 4. Les classes de grille du système de grille de Bootstrap 3 sont un peu différentes des classes de grille de bootstrap 4.
Dans Bootstrap 4, les classes de grille nouvellement mises à jour sont,
.col- (pour les appareils mobiles) et .col-xl- (pour des tailles plus grandes que les ordinateurs de bureau, c'est-à-dire ≥1200px)
Donc, pour le code d'appareil de taille mobile, vous devez utiliser .col- * class et non col-xs- * class.
Si vous rencontrez un problème avec les images en vue mobile, vous pouvez utiliser la classe img-responsive pour l'image, cela peut vous aider.