Wie man Margin-Top auf Kartenelement aber nicht auf den gesamten Container-Fluid anwendet

Question

Ich versuche, diesen Container ein anderes Hintergrundbild zu haben, aber Rand oben auf das Kartenelement zu tun verschiebt alles entlang des Bildes. Hier ist mein Code Bootstrap4:

#card.container-fluid { 
 
    background-image: url("../images/picture2.jpg"); 
 
    background-position: 12em; 
 
    background-size: cover; 
 
    margin-bottom: 20px; 
 
}

<div class="jumbotron jumbotron-billboard"> 
 
    <div class="img"></div> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-12"> 
 
     <h1>title</h1> 
 
     <div> 
 
      <a>link</a> 
 
      <a>lnk</a> 
 
      <a>link</a> 
 
      <a>link</a> 
 
      <a>link</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="container-fluid" id="card"> 
 
    <div class="card" style="width: 50%"> 
 
    <div class="card-body" id="bod"> 
 
     <h4 class="card-title">title</h4> 
 
     <p class="card-text" style="text-align: justify;"> 
 
     text text tex 
 
     </p> 
 
    </div> 
 
    <img class="card-img-bottom" src="image1.jpg" alt="Card image" style="width:100%"> 
 
    </div> 
 
</div>

Ich habe margin-top versucht, die Anwendung zu .card, zu # bod.card, sondern hält auch das Bild bewegt, danke im Voraus!

Answer 1

Es gibt mehrere Lösungen, die Sie zum Beispiel Padding verwenden können.

#card.container-fluid {padding-top: 20px;}