在Bootstrap 4中获取填充宽度相同的列

我正在以下网站上工作：http://jellekok.com/new/work.php

因为前3项没有右填充，第4项有，所以最后一项不那么高。我希望它们的宽度相同，有简单的方法吗？我正在使用Bootstrap 4。

代码：

      <div class="col-6 col-lg-3 pr-0 work_item">
        <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" /></a>
      </div>
      <div class="col-6 col-lg-3 pr-0 work_item">
        <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" /></a>
      </div>
      <div class="col-6 col-lg-3 pr-0 work_item">
        <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" /></a>
      </div>
      <div class="col-6 col-lg-3 work_item">
        <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" /></a>
      </div>

您可以将bootstrap 4类img流体添加到图像元素中，同时将pr-0添加到第四个元素中，以使其具有相同的高度
此处的代码链接：-https://jsfiddle.net/vnombqkh/
以下是您可以检查和测试的代码：-

<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>

    <div class="container-fluid">
        <div class="row">
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" class="img-fluid"></a>
          </div>
      </div>

      <div class="row mt-3">
         <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/inforintelligence_intro_960.png" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/new/img/index_brouwerij_frankendael.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/855_page_head_combo_alt.jpg" alt="" class="img-fluid"></a>
          </div>
      </div>

      <div class="row mt-3">
         <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/flyer_bno_img_lab_pioniers_960_v2.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/sequence_zero_bespreekruimte_960.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/posters_folders_row.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/fotoboek1.jpg" alt="" class="img-fluid"></a>
          </div>
      </div>
      <div class="row mt-3">
        <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/bobbie_wall_play_cover.jpg" alt="" class="img-fluid"></a>
          </div>
          <div class="col-6 col-lg-3 pr-0 work_item">
            <a href="exchange-party.php"><img src="http://jellekok.com/img/ynter_home_960.jpg" alt="" class="img-fluid"></a>
          </div>
      </div>
    </div>

</body>
</html>

相反，在所有列上使用px-2，以在列之间创建较小的檐沟。。。

   <div class="row">
        <div class="col-6 px-2 col-lg-3 work_item">
            <a href="exchange-party.php"><img class="mw-100" src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt=""></a>
        </div>
        <div class="col-6 px-2 col-lg-3 work_item">
            <a href="exchange-party.php"><img class="mw-100" src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt=""></a>
        </div>
        <div class="col-6 px-2 col-lg-3 work_item">
            <a href="exchange-party.php"><img class="mw-100" src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt=""></a>
        </div>
        <div class="col-6 px-2 col-lg-3 work_item">
            <a href="exchange-party.php"><img class="mw-100" src="http://jellekok.com/img/exchange_party_halloween_poster.jpg" alt=""></a>
        </div>
   </div>

https://www.codeply.com/go/WaF5e840pT

在这样做的时候似乎让它工作了：

步骤1：将类"pr-0"添加到4列中的每一列(这将把第四个也是最右边的项目完全放在屏幕的右边(
步骤2：将类"pr-3"添加到外部的"row"类中，在div的右侧创建一个边距。

相关内容

最新更新

热门标签：