Bootstrap/flexbox carte: déplacement de l'image vers la gauche/droite sur le bureau
Je suis en train de construire la carte de mise en page à l'aide de Bootstrap 4 avec flexbox activé. L'image est tirée de mon actuel de la mise en œuvre et il fonctionne comme prévu.
Structure HTML est la suivante:
<section>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-block">
<h4 class="card-title">Curabitur gravida vestibulum imperdiet.</h4>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem. Integer sed mi quis nisl eleifend interdum.</p>
<p class="card-text">Cras convallis ut turpis vitae facilisis. Morbi eu augue vel quam efficitur rhoncus vitae eget lectus. Cras augue ligula, aliquam ut enim ut, feugiat imperdiet sem.</p>
<a href="#" class="btn btn-primary">Read More</a>
</div>
</div>
</div>
<div class="col-md-6">
<img class="card-img-bottom" src="img1.jpg" alt="" title="">
</div>
</div>
</div>
</section>Maintenant, quand je l'échelle de la taille de son écran, j'ai obtenu le résultat suivant (qui est attendue avec Bootstrap, mais ce n'est pas voulu):
Ce que je voudrais voir, au contraire, est:
Donc ma question est, comment je peux l'implémenter correctement ce type de mise en page? Je suis à l'aide de flex-boîte, de sorte que Bootstrap colonnes (col-*) sont toujours à la même hauteur, ce qui est exactement ce que je veux. Mais je devrais supprimer les paddings entre deux colonnes, puis faire deux colonnes, le contenu est toujours de couvrir 100% des parents de la hauteur, et enfin, assurez-vous que l'image entretient c'est le rapport d'aspect, de sorte qu'il devrait être coupée à partir du centre, comme je l'ai dans l'exemple.
J'ai Googlé et essayé de nombreuses solutions différentes mais tous semble être trop complexe ou "hacky" des solutions. Alors je me demandais est-il vrai qu'il n'est pas facile à mettre en œuvre ce type de mise en page...?
Remarque: la solution ne doit pas être Bootstrap liées, la solution générale pour ce genre de problème est encore mieux.
Oui vrai, mais avec l'arrière-plan de la taille, je ne peux pas utiliser cette balise img, mais ont à utiliser des div à la place? Et je pense que l'objet de l'ajustement n'est pas pris en charge par IE et le Bord de sorte qu'il n'est pas acceptable de solution.
Ce sont les deux “facile” des moyens. Bien sûr, les choses se compliquent si vous avez besoin de mettre en œuvre des issues pour les plus âgés/incapable navigateurs. Pour l'objet de l'ajustement sur les images dans IE/Edge il y a des solutions de contournement/polyfills.
J'ai choisi de fond-taille du chemin à parcourir. En fait, je voulais utiliser la balise img, mais plutôt de sacrifier plutôt que d'aller trop complexe, des solutions et des mécanismes de secours.
OriginalL'auteur m5seppal | 2016-08-30
Vous devez vous connecter pour publier un commentaire.
J'ai pensé à une façon de le faire, à l'aide de background-size: cover. J'ai dû utiliser des div à la place de l'img mais sinon, cette solution fonctionne et dans mon cas img n'est pas nécessaire. D'autres solutions sont toujours les bienvenus.
J'ai modifié mon code html:
Pour carte-img-bas, j'ai mis de style:
Et dans la vue du bureau, j'ai modifier la hauteur à 100% de sorte que la hauteur est toujours la même que la hauteur de la carte-bloc.
Il reste encore un peu de rembourrage supplémentaire entre la carte-bloc et carte-img-bas, dans le bureau à vue à la suite d'Amorçage par défaut les rembourrages. Pour cette raison, la zone blanche est légèrement plus grand que l'image. Pour moi, ce n'est pas un problème donc je n'ai pas les supprimer.
Je ne considère pas officiellement pris en charge - leur carte-img-droit classe est en secondaire fichier css, pour cet exemple, - elle n'est pas dans la distribution principale... Horizontal support de la carte est actuellement demandé: github.com/twbs/bootstrap/issues/20794
Merci beaucoup, div class="row" aide beaucoup
Vous pouvez jouer avec
p-0etm-0de padding (marge) à zéro (0) pour enlever le cadre gris.OriginalL'auteur
Une solution que j'ai trouvé, je vais avoir des problèmes avec la hauteur de l'image, mais c'est une autre question ...: P
OK, le gros problème de réinventer quelque chose qui est déjà prêt, c'est que les solutions ont tendance à donner des problèmes quand nous avons besoin de l'original, donc dans ma solution, nous avons juste ajouté une classe, qui travaillerait de concert avec les autres cas, la classe a été utilisé , si la "carte-img-gauche" de la classe de la "carte-budy" classe aurait une marge de gauche proportionnelle à la taille de la aligné à gauche de l'image, si la classe n'existe pas cette marge serait l'origine.
C'est une solution viable et ne serait pas perturber le système d'origine, mais il doit être raffiné ...
OriginalL'auteur