Boostrap 4布局
Boostrap 4布局
提问于 2019-06-07 06:42:08
好的，我不能理解这个，我想要的是下面的图片
问题是左边的文本(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>有任何问题请提出来，感谢您的帮助。
回答 1
Stack Overflow用户
发布于 2019-06-07 08:40:24
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/ (这里是重置边距或填充 )之前找到可用的类
要了解如何使用fex：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56485934
复制相关文章
相似问题
腾讯云开发者
