Question

我正在以下网站上工作：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>

Answer 1

相反，对所有列都使用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

Answer 2

您可以将bootstrap 4类img-fluid添加到图像元素，同时将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>

Answer 3

似乎可以在执行此操作时使它工作：

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

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

3 个答案: