twitter-bootstrap - 全屏标题中的 2 个 div

Question

我想要一个带有 2 个 div 的全屏标题，例如 this

这是我目前所做的，div 不是 100% 宽度，我需要向右侧的 div 添加叠加层(如示例)。

.masthead {
  display: table;
  width: 100%;
  height: auto;
  padding: 200px 0;
  text-align: center;
  color: #fff;
  /*background: url(../img/main_pic.jpg) no-repeat bottom center scroll;*/
  background-color: green;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

.masthead .intro-body {
  display: table-cell;
  vertical-align: middle
}

.masthead .intro-body .brand-heading {
  font-size: 50px
}

.masthead .intro-body .intro-text {
  font-size: 18px
}

@media (min-width: 768px) {
  .masthead {
    height: 100%;
    padding: 0
  }
  .masthead .intro-body .brand-heading {
    font-size: 100px
  }
  .masthead .intro-body .intro-text {
    font-size: 22px
  }
}

.right {
  background-color: blue;
}

.left {
  background-color: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<header class="masthead">
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-lg-6 mx-auto left">
          <p class="intro-text">left</p>
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
        <div class="col-lg-6 mx-auto right">
          <p class="intro-text">right</p>
          <form class="contact-form row">
            <div class="col-md-12">
              <label></label>
              <input type="text" class="form-control" placeholder="name" required>
            </div>
            <div class="col-md-12">
              <label></label>
              <input type="email" class="form-control" placeholder="email" required>
            </div>
            <div class="col-md-6">
              <label></label>
              <input type="tel" class="form-control" placeholder="tel" required>
            </div>

            <div class="col-md-6 col-md-offset-4">
              <label></label>
              <button type="submit" class="btn btn-primary btn-block btn-lg">send</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>

Codepen Link

Answer 1

1. 您可以使用 .container-fluid 类实现全 Angular 容器
2. 将背景图片添加到 .masthead。通过使用 rgba
将背景颜色应用于 .right 来创建叠加效果

codepen

.masthead {
  display: table;
  width: 100%;
  height: auto;
  padding: 200px 0;
  text-align: center;
  color: #fff;
  background: url(https://unsplash.it/3000x1000) no-repeat center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.masthead .intro-body {
  display: table-cell;
  vertical-align: middle;
}
.masthead .intro-body .brand-heading {
  font-size: 50px;
}
.masthead .intro-body .intro-text {
  font-size: 18px;
}
@media (min-width: 768px) {
  .masthead {
    height: 100%;
    padding: 0;
  }
  .masthead .intro-body .brand-heading {
    font-size: 100px;
  }
  .masthead .intro-body .intro-text {
    font-size: 22px;
  }
}

.right {
  background: rgba(0, 25, 84, 0.5);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="masthead">
  <div class="intro-body">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6 mx-auto left">
          <p class="intro-text">left</p>
          <a href="#about" class="btn btn-circle js-scroll-trigger">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
        <div class="col-lg-6 mx-auto right">
          <p class="intro-text">right</p>
          <form class="contact-form row">
            <div class="col-md-12">
              <label></label>
              <input type="text" class="form-control" placeholder="name" required>
            </div>
            <div class="col-md-12">
              <label></label>
              <input type="email" class="form-control" placeholder="email" required>
            </div>
            <div class="col-md-6">
              <label></label>
              <input type="tel" class="form-control" placeholder="tel" required>
            </div>

            <div class="col-md-6 col-md-offset-4">
              <label></label>
              <button type="submit" class="btn btn-primary btn-block btn-lg">send</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</header>