时间戳

首页 > 解决方案 > 文本在 bootstrap-4 中超出卡片

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

问题描述

我想使用 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;
}

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

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

标签： bootstrap-4

解决方案

你不需要上课.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

推荐阅读