Получение столбцов с отступом одинаковой ширины в Bootstrap 4 - PullRequest
Новая
       19

Получение столбцов с отступом одинаковой ширины в Bootstrap 4

0 голосов
/ 13 ноября 2018

Я работаю на следующем сайте: 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>

Ответы [ 3 ]

0 голосов
/ 13 ноября 2018

Вы можете добавить к своим элементам изображения img-Fluid класса начальной загрузки 4 и одновременно добавить 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>
0 голосов
/ 14 ноября 2018

Кажется, чтобы это работало при этом:

Шаг 1: добавление класса «pr-0» в каждый из 4 столбцов (четвертый и самый правый элемент будут полностью расположены справа от экрана).
Шаг 2: добавление класса «pr-3» к внешнему классу «row», создание поля с правой стороны от div.

0 голосов
/ 13 ноября 2018

Вместо этого используйте 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

...