Boostrap 4布局

Question

好吧，我不能把我的头缠绕在下面的图片上

问题在于，左侧的文本（100％数字化应用程序）需要放在容器中，以便与网站其余部分的边距/边距相匹配

到目前为止，这是我的代码

<div class="container-fluid bg-primary" style="padding-left: 0;">
 <div class="row" style="padding-left: 0;">
  <div class="col-lg-7 how-it-works-background" style="padding-top: 145px; padding-bottom: 125px;">
  <div class="container">
      <div class="row">
          <div class="col-lg-12" style="vertical-align: middle; margin:auto;">
              <h2 class="font-white">100% digital</h2>
              <h2 class="font-white">application process</h2>
              <div style="padding-top: 28px;">
                  <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
              </div>

            </div>
      </div>

  </div>

</div>
<div class="col-lg-5" style="vertical-align: middle; margin:auto; padding-left: 10%; padding-right: 10%;">
    <h4 class="font-white">same day cash transfer</h4>
    Apply before Xpm weekdays to get your loan approved on the same day.
    <br>
    <br>
    <h4 class="font-white">automatic repayments</h4>
    Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.
    <br>
    <br>
    <h4 class="font-white">no penalty for early repayment</h4>
    If you pay your loan off ahead of schedule, great! We don't charge fees for this.
</div>
</div> 
</div>

任何问题都请提出，感谢您的帮助。

Answer 1

bootstrap有很多内置的类可以为此派遣，但是它有助于理解使用它的flex模型。

您可以通过这种方式使用它们

.row {
  height: 400px;
  /* demo purpose  remove it or reset it*/
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /><div class="container-fluid bg-primary pl-0 text-white">
  <div class="row " >
    <div class="d-flex col-lg-7 how-it-works-background"   >
      <div class=" m-auto">
        <div>
          <div>
            <h2 class="font-white">100% digital</h2>
            <h2 class="font-white">application process</h2>
            <div class="pt-4">
              <button class="btn btn-moola-white btn-4c">HOW IT WORKS</button>
            </div>

          </div>
        </div>

      </div>

    </div>
    <div class="d-flex col-lg-5 justify-content-center flex-column py-2" >
      <h4 >same day cash transfer</h4>
      <p class="text-body">Apply before Xpm weekdays to get your loan approved on the same day.</p>
      <h4 class="mt-4">automatic repayments</h4>
      <p class="text-body">Never miss a payment with automatic repayments on your payday-weekly, fortnightly or monthly.</p>      
      <h4 class="mt-4">no penalty for early repayment</h4>
      <p class="text-body">If you pay your loan off ahead of schedule, great! We don't charge fees for this.</p>
    </div>
  </div>
</div>

有用的资源/提醒： 在设置冗余样式https://getbootstrap.com/docs/4.3/layout/grid/ （此处重设边距或填充https://getbootstrap.com/docs/4.3/utilities/spacing/）之前找到可用的类

了解如何使用fex：https://css-tricks.com/snippets/css/a-guide-to-flexbox/