html - Bootstrap CTA 按钮右栏全高

Question

我在尝试让我的右栏有一个占据该栏的整个高度和宽度的按钮时遇到了问题。下面是我的代码。我试过调整高度，设置位置，但仍然没有在这个奇怪的结构中找到任何运气。

我使用 Twitter Bootstrap 4、SCSS 和 jQuery 作为我的构建框架。

我的 Bootstrap 代码

.cta-section {
  background: #243635;
  .center-align {
    align-items: $center-align;
  }
  .section-content-left {
    text-align: left;
    padding: 2.625rem 3.5rem 2.625rem 8.125rem;
  }
  h2 {
    font-size: $h2size;
    font-family: $nunito;
    font-weight: 200;
    color: $colorwhite;
  }
  p {
    font-size: $font15px;
    color: $colorwhite;
    line-height: 1.625rem;
    opacity: .77;
  }
  .cta-block-right {
    background: $colorgreen;
    font-family: $nunito;
    color: $colorwhite;
    .cta-large {
      color: $colorwhite;
      b {
        color: $colorwhite !important;
      }
    }
  }
} // End Cta Section

<div class="cta-section">
  <div class="container-fluid">
    <div class="row center-align">

      <div class="col-md-8 col-sm-12">
        <div class="section-content-left">
          <h2> We Make It Easy To Find Work You Love</h2>
          <p> It can seem daunting applying for a new career. Not to mention that you're interested in doing it in an innovative way (remotely). Don't worry, we have a simple process and we'll walk you through from start to finish. </p>
        </div>
        <!-- end section-content-left -->
      </div>
      <!-- col-md-8 col-sm-12 -->


      <div class="col-md-4 col-sm-12 column-bg-green" style="
                height: 100%;
                width: 100%;
                position: relative;
            ">
        <div class="cta-block-right" style="
                /* position: absolute; */
            ">
          <a class="cta-large" href="#"> <b>  See Our Process </b> </a>

        </div>
        <!-- end cta-block-right -->
      </div>
      <!-- end col-md-4 col-sm-12 -->


    </div>
    <!-- end row -->
  </div>
  <!--end container -->

</div>

Answer 1

解释

在 Bootstrap 4 中，rows 和 col 是使用 Flexbox 制作的。因此，默认情况下，Bootstrap col 采用整个可用高度，因为它的 row flex 容器的父级的默认 align-item 属性是“stretch”。

---

解决方案

只需删除所有内联样式并在 .cta-block-right 按钮上添加 Bootstrap CSS 类 .h-100。

<div class="col-md-4 col-sm-12 column-bg-green">
    <div class="cta-block-right h-100">
      <a class="cta-large" href="#"> <b>  See Our Process </b> </a>
    </div>
    <!-- end cta-block-right -->
</div>
<!-- end col-md-4 col-sm-12 -->

应该这样做:)