时间戳

首页 > 解决方案 > 2 列布局，居中对齐，同时保持列背景颜色全尺寸

bootstrap-4 - 2 列布局，居中对齐，同时保持列背景颜色全尺寸

问题描述

我对引导程序有点陌生，试图弄清楚如何让紫色列保持居中对齐，同时让整个左列呈紫色。

在此处输入图像描述

这是我的代码到目前为止的样子：

    <div class="container">
<div class="row align-items-center">
  <div class="col col-md-6" style="background-color:#7849b8; height: 100% auto;">
    <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
    <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
  </div>
  <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
    <img src="https://via.placeholder.com/490x600" class="img-fluid">
  </div>
</div>

标签： bootstrap-4

解决方案

您可以采取几种不同的方法。一种方法是将列内容包装在它自己的 div 中并使用 flexbox 居中...

<div class="container">
    <div class="row">
        <div class="col col-md-6 d-flex" style="background-color:#7849b8;">
            <div class="align-self-center">
                <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
                <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
            </div>
        </div>
        <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
            <img src="https://via.placeholder.com/490x600" class="img-fluid">
        </div>
    </div>
</div>

https://codeply.com/p/IMbHi7jOF6

推荐阅读