将项目按特定尺寸对齐;t 工作

Question

我在我的布局中使用bootstrap。

<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column  justify-content-center align-items-md-center">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>

例如，下面是我的行中的一列。该列的内容应该位于左侧(默认)。垂直居中所以我用

d-flex flex-column  justify-content-center

但是现在在较小的设备上，我希望内容在中间，而不是在左边。

所以尝试使用类

align-items-md-center

告诉内容应该在>768 px装置。但是整个过程中内容都是在中间的，不仅仅是在md设备上。

我该怎么做呢?

Answer 1

您需要使用align-items-center align-items-md-start。默认设置居中，重置md(> 768px)居中

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" >
<div class="container-fluid footer">
<div class="row p-4">
<div class="col-lg-3 d-flex flex-column  justify-content-center align-items-center align-items-md-start">
<h3>Company</h3>
<div class="mt-3 text-left">
<div class="box">
<p class="link-router" routerLink="/careers">Careers</p>
</div>
<div class="box">
<p class="link-router" routerLink="/about-us"><a>About</a></p>
</div>
<div class="box">
<p class="link-router" routerLink="/contact-us">Contract us</p>
</div>
</div>
</div>
</div>
</div>