Question

我在尝试使我的右列具有一个占用列的整个高度和宽度的按钮时遇到了麻烦。这是下面的代码。我尝试过调整高度，设置位置，但在这个奇怪的结构中仍然没有发现任何运气。

我正在使用Twitter Bootstrap 4，SCSS和jQuery作为构建框架。

我的引导程序代码

.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

EXPLANATION

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

解决方案

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

<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 -->

应该这样做：）

Bootstrap CTA按钮右栏全高

1 个答案: