在 Bootstrap 4 中获取具有相同宽度的填充列答案

【问题标题】：Getting columns with padding the same width in Bootstrap 4在 Bootstrap 4 中获取具有相同宽度的填充列
【发布时间】：2019-04-16 07:40:45
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap bootstrap-4 multiple-columns padding

【解决方案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

【讨论】：

这会在外侧产生比项目之间更少的边距。我希望边距在任何地方都是 15px。

【解决方案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>

【讨论】：

仅在您的示例中，右侧没有边距？图片之间的内边距必须与整个网站/内容的左右边距宽度相同。

【解决方案3】：

执行此操作时似乎可以正常工作：

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

【讨论】：