卡片自定义甲板在bootstrap 4

Question

如何在容器内创建此卡网格（Bootstrap 4）？我不明白如果文本在div（卡）中我怎么能把文本放在容器中。

<section class="second__offers">
    <div class="container">
              <div class="card-group">
            <div class="card text-black">
                <img class="card-img-top" src="img/service-1.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-2.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <img class="card-img-top" src="img/service-3.jpg" alt="Card image top">
                <div class="card-img-overlay">
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>

例如：

Answer 1

使用background-image:而不是img标签（为每张卡和css以及适合的background-image:添加类）

你的评论使container采取100%的width使用container-fluid而不是container并在css中设置：

.container-fluid{
  padding:0!important;
  margin:0!important;
}

https://jsfiddle.net/nhybo32s/10/

.face{
     background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.body{
     background-image: url(https://material.angular.io/assets/img/examples/shiba2.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.card {border:none!important}
.container-fluid{
  padding:0!important;
  margin:0!important;
}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<section class="second__offers">
    <div class="container-fluid">
              <div class="card-group">
            <div class="card text-black face">
                <div class="">
                    <h3 class="card-title">Card title</h3>
                    <h4 class="card-subtitle">Card subtitle</h4>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black body">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
            <div class="card text-black">
                <div>
                    <h3 class="card-title">Card title</h3>
                    <p class="card-text">This is a simple Card example</p>
                    <a href="#" class="btn btn-primary service-btn">About</a>
                </div>
            </div>
          </div>
    <div class="card-group">
        ...
     </div>
    </div>
  </section>