时间戳

首页 > 解决方案 > 如何在引导程序中修复等列高度问题

html - 如何在引导程序中修复等列高度问题

问题描述

我是新手。我正在尝试创建一个包含一些令人惊叹的艺术的画廊。但是，我面临一些问题。即使图像不是那么大，所有列的高度都相同。如何删除多余的空间？

<div class="container-fluid">
      <div class="row content" id="images">
        <div class="col-md-4">
          <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-4">
          <img src="..\images\bp-miller-f6BffCg5Ymc-unsplash.jpg" alt="" class="img-fluid">
        </div>
      </div>
</div>

在此处输入图像描述

这就是我想要的样子。 在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

这可能会有所帮助

<div class="container-fluid">
<div class="row">
    <div class="col-md-6 content" id="images">
        <div class="col-md-12 ">
             <img src="..\images\allyson-beaucourt-HaD6zYONkg0-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\annie-spratt-52hSxHwXE7I-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  ">
            <img src="..\images\amr-taha-ig_Qc8qoTSI-unsplash.jpg" alt="" class="img-fluid">
        </div>
    </div>

    <div class="col-md-6 content" >
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\annie-spratt-Pzyyzaiy-LE-unsplash.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-12  " style="max-height: 50%">
            <img src="..\images\arno-senoner-FOM8031NAG8-unsplash.jpg" alt="" class="img-fluid">
        </div> 
      </div>
</div>

在引导网格上查看更多信息

推荐阅读