引导程序4中的自定义卡片组

Question

如何在容器（引导程序4）中创建此卡片网格？ 如果div（card）中的文本，我不知道如何将文本放入容器中。

<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%的{​​{1}}，使用width代替container-fluid并在CSS中进行设置： < / p>

container

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

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

.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;
}