GRID 系统中的 3 列

Question

我需要将这3张图片和文字放在3列，对齐，怎么办？

<section class="py-5 grey lighten-4" id="team"> <div class="container"> <div class="wow fadeIn"> <h1 class="h1 pt-5 pb-3 text-center">Equipe <strong>NOLS</strong></h1> <p class="px-5 mb-5 pb-3 lead text-center blue-grey-text"> 一二 </p> </div>

----------从这里----------

<div class="row mb-lg-4 center-on-small-only"> <div class="col-lg-6 col-md-12 mb-r wow fadeInLeft" data-wow-delay=".3s"> <div class="col-md-6 float-left"><img class="img-fluid rounded z-depth-1 mb-3"' src="img/erick.jfif" alt="team member"/></div> <div class="col-md-6 float-right"> <div class="h4">Erick Henrique</div> <h5 class="font-bold blue-grey-text mb-4">Diretor de sistemas</h5> <a href="" target="_blank"><iclass="fa fa-linkedin"> 一个 </div> &lt;div class="col-md-6 float-left"&gt;&lt;img class="img-fluid rounded z-depth-1 mb-3"src="img/joao.jfif" alt="团队成员"/> <div class="col-md-6 float-right"> 若昂·维托·瓦伦蒂姆 <h5 class="font-bold blue-grey-text mb-4">Diretor WEB</h5> O responsável por toda parte do desenvolvimento WEB da NOLS。

若昂·维托·瓦伦蒂姆 </div> </div> <div class="col-lg-6 col-md-12 mb-r wow fadeInLeft" data-wow-delay=".3s"> src="img/nicolas.jfif" alt="团队成员"/>

Answer 1

每行的列宽最多应为 12。现在，我只在第 2 行看到一列 6。由于缺少结束标签，其他所有内容都在该列内。您还混合了 H4 标签，这是对 DIV 的不必要使用，只会增加您的困惑。很明显，您复制的可能不是您的真实代码，因为有很多丢失的位。

<div class="row mb-lg-4 center-on-small-only"> 
  <div class="col-lg-6 col-md-12 mb-r wow fadeInLeft" data-wow-delay=".3s"> 
    <div class="col-md-6 float-left"></div> 
    <div class="col-md-6 float-right"></div>
    <div class="col-md-6 float-left">
      <div class="col-md-6 float-right"></div>
    </div>
    <div class="col-lg-6 col-md-12 mb-r wow fadeInLeft" data-wow-delay=".3s"></div> 
  </div>

在我清理了您的代码段并消除了所有与网格无关的项目后，您在底部缺少一个关闭的 DIV 标记。此外，很明显，由于关闭 DIV 标记错误或缺少，行标记内只有一列 6。

你真的应该开始使用更多的行标签，因为坦率地说，你组织它们的方式是不可读和可怕的。难怪你不知道在哪里关闭哪个标签。