Question

我正在尝试创建一个标题图像，该图像的底部有一些文本。但是，每当我创建行和列时，文本就会转到另一行。问题是我正在尝试创建具有两个文本实例的标题图像。我搞砸了绝对位置，这也不起作用。我还尝试过弄乱d-flex属性，align-items-end并证明内容的正确性...

我知道这是一个简单的解决方法，我只是想弄清楚如何使文本显示在底部。

那么您将如何创建以下图像作为示例？

Header Image

<div class="fluid-container" style="width: 100%">
  <div class="row" style="">
    <div class="col"> <img class="card-img-top" src="images/electrical-repair.png" width="100%" height="auto" alt=""/>
      <h4 class="text-danger d-flex justify-content-center bannerText text-center">Premiere Commercial Electrical Services in the Northwest</h4>
    </div>
  </div>

Answer 1

这是一个结合了一些自定义代码和引导程序的示例。您可能需要调整大小或以全屏显示，希望对您有所帮助。

body {
  padding: 0;
  margin: 0;
}

.full-home {
  width: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-position: 50% 50%\9 !important;
  background-size: cover;
  min-height: 100vh;
  position: absolute;
}

.hero-wrapper {
  position: relative;
  z-index: 1;
  height: 100vh;
}

.hero-wrapper-inner {
  margin: 0;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
}

.hero-wrapper-bottom {
  padding: 10px 0;
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');"></div>
<div class="hero-wrapper">
  <div class="container hero-wrapper-inner">
    <div class="row">
      <div class="col-md-12">
        <h1>Header</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>
  </div>
  <div class="hero-wrapper-bottom">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </div>
  </div>
</div>

如何在Bootstrap 4的另一行中显示另一行？

1 个答案: