Question

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

Ans CSS：


.my-col {
  width: 50%;
}

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

但是该文本超出了卡片的显示范围，如this picture

有人可以帮我解决这个问题，并将所有文本存储在卡中吗？

Answer 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

文字在bootstrap-4中移出卡外

1 个答案: