文本在 bootstrap-4 中超出卡片答案

【问题标题】：Text goes outside of the card in bootstrap-4文本在 bootstrap-4 中超出卡片
【发布时间】：2019-06-18 03:56:55
【问题描述】：

我想使用 bootstrap card-img-overlay 在图像上写一些文字

我已经写了这段代码：

<div class="h-100">
    <div class="card h-100">
      <img class="card-img" src="../imgs/header.jpg" alt="Card image">
      <div class="card-img-overlay h-100">
        <div class="container h-75 pt-5">
          <div class="row h-100">
            <div class="my-col h-100">
              <h2 class="card-title text-danger">WEBO DESIGN</h2>
              <p
                class="text-secondary card-text"
              >Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloribus animi non adipisci iure in, ab perspiciatis, cum ipsum ea, tempore assumenda. Quod molestias cupiditate vitae eius reiciendis expedita quo nulla adipisci totam rerum tempora, minus, unde facilis inventore pariatur asperiores soluta perferendis, dolores repellat natus similique incidunt! Eius, fugiat consequatur.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

回答 CSS：


.my-col {
  width: 50%;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

但是文字超出了卡片的范围，如this picture所示

谁能帮我解决这个问题并把所有的文字都放在卡片里？

【问题讨论】：

尝试删除所有h-100类，并使用css属性background-image来显示图像而不是img html标签
当我使用background-image 时，图像在小屏幕设备中消失了！！

标签： bootstrap-4

【解决方案1】：

你不需要.my-col { width: 50% }这个类

我通过指定 col col-md-8 类为您调整了它，其中 8 可以是您想要的中到大屏幕的任何宽度 (1-12)。

这就是为什么：https://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns

这是一支笔：https://codepen.io/atlanticdesignagency/pen/jjrVoJ

编辑：

另外，如果您想制作多部分卡片，方法如下：https://codepen.io/atlanticdesignagency/pen/orLBwo

【讨论】：