如何使另一行出现在 Bootstrap 4 的另一行内？答案

【问题标题】：How can I make another row appear inside of another row in Bootstrap 4?如何使另一行出现在 Bootstrap 4 的另一行内？
【发布时间】：2019-05-24 02:48:34
【问题描述】：

我正在尝试创建一个标题图像，其中一些文本位于图像的底部。但是，每次我创建行和列时，文本都会转到另一行。问题是我正在尝试创建一个包含两个文本实例的标题图像。我弄乱了绝对位置，这也不起作用。我也尝试过弄乱 d-flex 属性、对齐项目结束和对齐内容......

我知道这很容易解决，我只是想弄清楚如何让文本显示在底部。

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

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>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-4

【解决方案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>

【讨论】：