我试图留下一个有一行和两列的容器,以便能够在黑色和翡翠色之间生成一个分割,这个想法是在左侧有一个图像(正方形),邮件在图像下方并且右侧有说明文字,我遇到的困难是我的文字不适应屏幕变化,我以为它会直接适应容器的变化
最小可验证示例 https://github.com/Batvizz/ProblemExample
<h2 class="page-section-heading text-center text-uppercase text-secondary mt-5 "id="categoria1">About me</h2>
<div class="divider-custom">
<div class="divider-custom-line"></div>
<div class="divider-custom-icon"><i class="fas fa-star"></i></div>
<div class="divider-custom-line"></div>
</div>
<div class="container-fluid bg-warning" id="about" >
<div class="row">
<div class="col-sm bg-secondary">
<img class="img-responsive" class="ms-5" src="imagenes/omoiavatar.png" alt="png" />
<a href="mailto:[email protected]"><p class="px-5">bygmail.com</p></a>
</div>
<div class="col-md bg-primary">
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
<p>sdasdasdasdasdasdasdasdasdasdasdasdasdasdassdñlfkgjdslkfgjdlskfgjdslñkfgjlsñdkfgjldñskfgjdlsñkfgjdasdasdasdasdasdasdasd</p>
</div>
</div>
</div>
一些图片来指导你
我已经修改了你的代码。
对于包含图像的列,使用 class="col-md-4",对于文本 class="col-md-8"。
容器必须有
p-3
, 并分组到中心text-center
:给你的段落领先等级: