0
votes

Comment faire de la même taille que la DIV ci-dessus dans une colonne de grille de bootstrap?

C'est ma première question ici, soyez doux, je viens de commencer à apprendre ces choses :)

Je travaille sur la construction d'une page de pratique utilisant uniquement HTML, Sass et Bootstrap-Grid.CSS (donc essentiellement en utilisant uniquement des lignes et les colonnes, les classes de cartes ne sont pas incluses dans le fichier, je les ai coiffées séparément) et j'ai rencontré un problème probablement très simple qui me garde éveillé la nuit. P>

J'ai besoin de faire tous les divs de texte. les arrière-plans blancs) le même witdh "visuellement" comme l'img au-dessus d'eux, mais il suffit de redimensionner le texte de la carte et de les rendre absolument positionnés ne semble pas comme la solution appropriée en raison de la création d'un autre problème, et je veux garder le .col- à cause des résultats de RWD faciles. Le texte .Card-Text and .Card-img DIV hériter de la largeur donnée des .Col-, les images doivent conserver la bonne proportion et à cause du fond gris de .Card-img est identique à la section de l'ensemble de la section. problème réside uniquement dans le texte .Card (au moins visuellement). p>

La structure de colonne dans un .row ressemble à ceci: p> xxx pré>

et ainsi de suite (Six colonnes) et le SCCS pour cette section ressemble à ceci: p> xxx pré>

captures d'écran avec inspection des divs: p>

.Card P>

.Card-Texte p>

EDIT: P>

Les styles SCSS qui ont finalement fonctionné: P>

    .portfolio {
  background-color: $color-background;
  .card {
    background-color: $color-background;
    margin: 0 44px 50px 44px;
    .card-img {
      overflow: hidden;
      img {
      vertical-align: bottom;
      width: 100%;
      }
    }
    .card-text {
      background-color: $color-body;
      padding-top: 29px;
      padding-bottom: 27px;
      h5 {
        margin: 2px 0 0 0;
        font-weight: lighter;
        font-family: $font-decor;
        color: #737373;
        font-size: 14px;
      }
      h6 {
        font-family: $font-text;
        font-weight: bold;
        font-size: 18px;
        margin: 0;
        color: #333333;
      }
    }  
  }
  .col {
    padding-top: 45px;
  }
}


0 commentaires

3 Réponses :


0
votes
  • Définissez votre largeur IMG à 100% plutôt que de la hauteur.
  • Supprimer le rembourrage de .Card
  • Supprimer la marge de .Card-img

    espoir que cela fonctionne :)


2 commentaires

Meilleur moyen de répondre à la question est de réécrire le code et corrigé-le. S'il vous plaît éditer la réponse et attendez vos réponses.


Merci Austin, j'ai résolu le problème avec tous les idées des gars qui me poussaient à la bonne direction :)



0
votes

Ajoutez une certaine largeur à Carte-img code> puis déplacez .Card-Text Div code> Intérieur Carte-img Code> et modifier les styles CSS pour Carte-img code>.

J'ai modifié votre code et l'a ajouté à l'extrait. p>

aperçu une fois. p>

p>

<div class="col-md-4">
  <div class="card">
    <div class="card-img">
      <img src="https://p1.pxfuel.com/preview/844/972/952/suit-model-businessman-corporate-royalty-free-thumbnail.jpg" alt="image">
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
    
  </div>
</div>


1 commentaires

Merci Suraj, j'ai résolu le problème avec tous les idées des gars qui me poussaient à la bonne direction :)



0
votes

Il suffit d'ajouter le même marge: 0 44px code> que vous avez ajouté pour le .Card-img code> à votre .Card-texte code> élément et Ensuite, ajoutez largeur: 100% code> aux éléments de sorte qu'ils occupent la largeur complète de leur parent div et que vous devriez obtenir la largeur égale pour les deux éléments que vous le souhaitez.

Vérifiez et exécutez ce qui suit Code Snippet Strong> Pour un exemple pratique de l'approche ci-dessus: p>

p>

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>

<section class="portfolio">
  <div class="col-md-4">
    <div class="card">
      <div class="card-img">
        <img src="https://picsum.photos/240/360" alt="image">
      </div>
      <div class="card-text">
        <h6>Ebony & Ivory</h6>
        <h5>Branding</h5>
      </div>
    </div>
  </div>
</section>


2 commentaires

Merci Andrew, j'ai résolu le problème avec tous les idées gars qui me poussaient à la bonne direction :)


La perfectionnement ne fonctionne pas pour moi depuis que j'ai moins de 15 représentants;)