时间戳

首页 > 解决方案 > Bootstrap CTA按钮右栏全高

html - Bootstrap CTA按钮右栏全高

问题描述

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

我使用 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>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

解释

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

解决方案

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

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

应该这样做:)

推荐阅读