1
votes

Cartes Bootstrap 4: supprimez l'espace vide

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>

  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="card-header col-6 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="card-body col-6 border">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class="card-body col-12 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>
</div>

Il y a beaucoup d'espace vide dans la carte. J'en ai besoin comme:

css bootstrap-4 twitter-bootstrap

2 commentaires

Le contenu (1234567899) sera toujours de 10 chiffres sans espace entre (je n'ai pas pu modifier, alors commenté ici)

Quel est votre problème pour y parvenir? Cela me semble être un simple changement de CSS

3 Réponses :

2
votes

Vous pouvez le faire en ajoutant class = "p-0 my-auto" pour supprimer le padding et pour centrer verticalement. Voici l'extrait de code de travail pour le même

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          
            <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
         
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0 text-center">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
        </div>
        <div class="card-body col-6 border p-0  ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>

      </div>
    </div>
  </div>

.card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body.col-6 {
  background: red
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    text-align: center;
    word-break: break-all;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    text-align: center;
    word-break: break-all;
  }
}

.col-6 {
  height:65px;
}
.img-fluid {
 height:100%!important;
}
.card-header.col-6{
     background: black
}

Solution-2: Réponse selon la question du commentaire. Donner une hauteur fixe à col . Voici la solution pour le même

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0 ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>
      </div>
    </div>

    <div class="card bg-light col-md-4">
      <div class="row">
        <div class="card-header col-6 border p-0">
          <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-container" />
        </div>
        <div class="card-body col-6 border p-0  ">
          <h5 class="card-title text-center">1234567899</h5>
        </div>
        <div class="card-body col-12 border p-0">
          <a href="#" class="btn btn-block btn-primary">Go somewhere</a>
        </div>

      </div>
    </div>
  </div>

.card-body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-body.col-6 {
  background: red
}

@media(min-width:768px) {
  .card-title {
    font-size: 3vw;
    text-align: center;
    word-break: break-all;
  }
  .img-container {
    height: 63px;
    width: 100%;
    object-fit: cover;
  }
}

@media(max-width:767px) {
  .card-title {
    font-size: 8.5vw;
    text-align: center;
    word-break: break-all;
  }
  .img-container {
    height: 80px;
    width: 100%;
    object-fit: cover;
  }
}

13 commentaires

S'il vous plaît voir l'image dans la question, je veux comme ça. Dans ta réponse, ça vient juste au centre

Je ne veux pas d'espace au-dessus et en dessous du texte (1234567899)!

@orever le vérifier maintenant

Cette fois, cela a fonctionné, mais l'image est en train de s'étirer!

object-fit: cover; mettra à l'échelle votre image en fonction de la largeur du conteneur. S'il n'est pas nécessaire de remplir l'image complète dans le col , vous pouvez donner une hauteur fixe à col selon vos besoins. J'espère que vos doutes sont dissipés. Veuillez accepter ma réponse si vous pensez que ma réponse vous a aidé. Bon codage

@orever a mis à jour les deux solutions. Choisissez celui selon vos besoins

La section des boutons dans votre réponse (2e) fonctionne comme prévu pour moi, mais ici, ( jsfiddle.net/gh1snp80 ) ce n'est pas le cas. Pourquoi ça?

vous devez supprimer

qui a été enveloppé pour le bouton

Compris, nous utilisons `.col-md-3` pour pouvoir avoir 4 colonnes d'affilée. Droite?

Oui exactement. Veuillez voter pour ma réponse si vous pensez que cela a été utile

jsfiddle.net/gh1snp80 exécuter le script en plein écran, ici il n'aura que 3 colonnes consécutives et quatrième dans une autre ligne. Comment les ajuster?

C'est parce que vous avez ajouté des classes de marge à `col-md-3` `div`

Alors, comment puis-je y parvenir, j'ai besoin d'espace entre deux colonnes et d'espace entre le début et la fin ...

0
votes

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<style>
.card-title {
    margin-bottom: 0;
}
</style>

<div class="row">


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>


  <div class="card bg-light col-sm-3">
    <div class="row">
      <div class="col-4 p-0 border">
        <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
      </div>
      <div class="col p-0 border text-center">
        <h5 class="card-title">1234567899</h5>
      </div>
      <div class=" col-12 p-0 border">
        <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
      </div>
    </div>
  </div>
</div>

7 commentaires

Pouvez-vous s'il vous plaît me dire quels changements vous avez fait, afin que je puisse essayer sur mon serveur (codes originaux)

Je dois supprimer de l'espace supplémentaire dans la colonne. si ce n'est pas bon selon vos besoins. Alors s'il vous plaît expliquez-moi ce qui excite le problème

Qu'avez-vous fait pour supprimer l'espace supplémentaire ..?

J'ai ajouté la classe de bootstrap p-0 dans la colonne

Oui, voyez mon image, la div prend juste autant d'espace que le texte requis!

si vous voulez que le texte soit au centre, vous pouvez utiliser ce CSS .col.p-0.border.text-center {display: flex; align-items: centre; justify-content: centre; }

Pourtant, sur les petits écrans (mobiles), il y a de l'espace!

0
votes

    <section class="test">
     <div class="container">
     <div class="row">
        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        <div class="col-lg-3 col-md-4 col-sm-6 mb-3 ">
           <div class="card bg-light">
              <div class="card-body p-0">
                 <div class="row no-gutters">
                    <div class="col-lg-5 border">
                      <img src="https://cdn.pixabay.com/photo/2016/12/19/08/39/mobile-phone-1917737__340.jpg" class="img-fluid" />
                    </div>
                    <div class="col-lg-7 border px-3 pt-2">
                      <h5 class="card-title">1234567899</h5>
                    </div>
                 </div>
              </div>
              <div class="card-footer">
                  <h5 class="card-title"><a href="#" class="btn btn-block btn-primary">Go somewhere</a></h5>
              </div>
           </div>
        </div>

        </div>
     </div>
  </section>

0 commentaires