J'ai passé plus de temps que je me soucie d'admettre d'essayer d'obtenir une ligne d'images pour être des liens cliquables dans une ligne code> qui aligne les images au milieu de la ligne Voici un jsfiddle de ce que j'ai essayé p> Voici ce que j'essaie de faire: strong> p> p> Code> que div.row code>, mais il casse la réactivité et les images ne redimensionnement pas correctement. .jumbotron .row > a {
display: block;
}
.jumbotron > .row div a img {
max-height: 80px;
max-width: 100%;
vertical-align: middle;
}
3 Réponses :
S'il vous plaît essayez ceci et lemme savoir si c'est ce que vous vouliez
<style>
img {
height: auto;
width: 100%;
}
.vertical {
height: 100vh;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.abcd {
min-width: 5em;
flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="vertical">
<div class="abcd">
<a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>
</div>
<div class="abcd">
<a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>
</div>
<div class="abcd">
<a href="#"><img src="https://images.unsplash.com/photo-1460378150801-e2c95cb65a50?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=1b5934b990c027763ff67c4115b6f32c"></a>
</div>
</div>
</div>
</body>
Merci pour la lecture. Cela ne l'a pas fait. J'ai mis à jour pour montrer ce que j'essaie d'obtenir en conséquence.
Essayez le code édité et ajoutez également une certaine marge entre les images si vous le souhaitez que j'ai oublié d'ajouter cela dans le code
Tandis que cet extrait de code peut résoudre la question, y compris une explication aide vraiment à améliorer la qualité de votre message. N'oubliez pas que vous répondez à la question des lecteurs à l'avenir, et ces personnes pourraient ne pas connaître les raisons de votre suggestion de code. Essayez également de ne pas fouler votre code avec des commentaires explicatifs, cela réduit la lisibilité du code et des explications!
J'ai créé un peu de contournement. Le vrai problème est que l'élément https://jsfiddle.net/f9ogw26n/21/ p> code> ne coopère pas. L'élément de liaison n'obtiendra pas la largeur / la hauteur de son enfant, c'est pourquoi la solution fournie ne fonctionne pas. Une solution de contournement est d'utiliser la propriété image de fond code>. Donner une enveloppe une hauteur et une largeur solides et appliquer l'image comme arrière-plan à l'aide de Taille de l'arrière-plan: contenir code>. Voir le violon fourni ci-dessous.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#">
<div class="wrapper" style="background-image:url('http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg');">
</div>
</a>
</div>
<div class="col-xs-4">
<a href="#" title="">
<div class="wrapper" style="background-image:url('http:////cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png')">
</div>
</a>
</div>
</div>
</div>
À l'avenir, veuillez ajouter le snippet dans la réponse elle-même, les liens peuvent aller mal.
div doit être span dans un élément en ligne tel que A
Les colonnes de bootstrap flottent par défaut avec CSS Voici le truc. P> p> Float code> Propriété. Avec float code> Nous ne pouvons pas aligner les colonnes d'alignement moyennes. Cependant, avec Affichage: Inline-Block Code> Nous pouvons. Tout ce dont nous avons besoin est de supprimer float code> des styles de colonnes et de les modifier en en ligne-block code> avec vertical-align: moyen code> et vous obtiendrez ce que tu veux. Mais n'oubliez pas de supprimer un espace supplémentaire fourni avec en ligne-block code>.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="jumbotron">
<div class="row vertical-align">
<div class="col-xs-4">
<a href="#" title=""><img src="http://www.americancivilwarstory.com/images/Coca-Cola_logo.svg.png" class="img-responsive"></a>
</div>
<div class="col-xs-4">
<a href="#" title=""><img src="http://cdn0.sbnation.com/entry_photo_images/2668470/coca-cola_large_verge_medium_landscape.png" class="img-responsive"></a>
</div>
<div class="col-xs-4">
<a href="#" title=""><img src="http://ichef.bbci.co.uk/images/ic/256x256/p03r5406.jpg" class="img-responsive"></a>
</div>
</div>
</div>
</div>
Impressionnant! Cela m'a eu sur la ligne d'arrivée. J'ai changé le sélecteur sur . Servertical-align [classe * = 'col -'] pour élargir son utilisation un peu.
Pouvez-vous jeter un plumiste?
Je suis un peu effrayé de demander ce que c'est ...
Punker ( PLNKR.CO ) est un outil en ligne où vous pouvez créer une application en cours pour démontrer votre problème. Parfois, des exemples de code ne suffisent pas.
Ouf! Content que ce n'est pas la définition du dictionnaire urbain. Je vais voir ce que je peux jeter ensemble avec plnkr.co
@ pgreen2 j'ai mis en place un jsfiddle de la question que j'ai rencontrée. J'ai essayé d'ajouter
! Important à mes déclarations CSS en pensant qu'il y a quelque chose dans Bootstrap qui le déroget, mais cela ne fait rien.Ajoute-t-il un peu de rembourrage à la dernière image une option? Jsfiddle.net/f9ogw26n/20
@ Wey-Wonder merci de lire! J'essaie d'obtenir les images alignez verticalement dans la rangée sans casser la réactivité de Bootstrap. Je peux les amener à aligner verticalement, mais lorsque la fenêtre redimensionne, il n'est pas réactif lorsque j'utilise la classe
vertical-align J'ai créé.