Bootstrap 4 Card Component Удалите ненужные пробелы

Question

поэтому я использую компонент карты из BS4, однако он ведет себя неожиданно: введите описание изображения здесь

, так что в основном это то, что я вижу в версии для Mozilla Dev.разметка выглядит следующим образом:

                       <div class="right-cards   col-lg-3 col-md-6 col-sm-6 col-xs-6">

                            <div class="card " id="first-card">
                                <a id="first_card_btn" class="btn-none" style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:block;'
                                    onclick="myFunction(this.id)"></a>
                                <img class="card-img-top" src="https://via.placeholder.com/370" alt="Card image cap">
                                <div class="card-body">
                                    <h4>contact us</h4>
                                </div>
                            </div>

                        </div>

проблема в том, что мне нужно, чтобы тело карты находилось сверху изображения - я знаю, как это разместить, но не могу избавитьсяиз лишних пробелов независимо от того, что я пытался.

Answer 1

Используя ваш код, я смог добавить несколько правил CSS, чтобы он работал следующим образом, дайте мне знать, если это работает для вас!Границы как раз для вас, чтобы увидеть пространство, используемое для каждого элемента

.card{
	border: 1px solid red;
}

.card-img-top {
	border: 1px solid green;	
}
.card-body{
	position: absolute;
	padding:0px !important;
	background-color:#3B9F2F;
	color: #FFF;
	border: 1px solid blue;
	width: 100%;
	top: 60%;
}

.right-cards {
  border: 1px solid yellow;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

  <div class="container">
  <div class = row>
     <div class="right-cards col-lg-3 col-md-6 col-sm-6 col-6">
         <div class="card " id="first-card">
            <a id="first_card_btn" class="btn-none"  onclick="myFunction(this.id)"></a>
            <img class="card-img-top" src="https://via.placeholder.com/370" alt="Card image cap">
            <div class="card-body">
                <h4>Contact us </h4>
            </div>
         </div>
     </div>
</div>