时间戳

首页 > 解决方案 > 客户部分未在 html 中对齐

html - 客户部分未在 html 中对齐

问题描述

我对 html css 很陌生，我遇到了这个问题：

我想创建一个包含 5 张图片的合作伙伴部分。目前它看起来像这样：howitisnow。它不是在一行中水平对齐，并且图片的大小不同。

实际上我希望我的客户部分看起来像这样： howtolook。

有人可以帮我弄这个吗？

这是我的html代码：

<section class="page-section" id="services">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 text-center">
                <h2 class="title font-bold mt-0">Client</h2>
                <hr class="divider my-4">
                <p class="subtitle mb-5">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem alias voluptates id harum expedita doloremque non explicabo cum inventore possimus!</p>
            </div>
        </div>
        <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/post.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/auto.jpg" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/dts.png" alt="">
                        </a>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <a href="#">
                            <img class="img-fluid d-block mx-auto" src="stylesheets/mobiliar.png" alt="">


         </a>
                </div>
                <div class="col-md-3 col-sm-6">
                    <a href="#">
                        <img class="img-fluid d-block mx-auto" src="stylesheets/pf.JPG" alt="">
                    </a>
                </div>
            </div>
        </div>
    </section>
</div>

标签： htmlcss

解决方案

要实现这样的事情，您需要做的就是给offset-md-1内部 div 中的第一个元素一个，所以结果应该是这样的：

<div class="container">
  <div class="row align-items-center">
    <div class="col-md-2 col-sm-6 offset-md-1">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
    <div class="col-md-2 col-sm-6">...</div>
  </div>
</div>

注意：这只会使它们出现在大屏幕的 5 列中。

这是工作演示：codepen.io

推荐阅读