Отступы между блоками в bootstrap

227
05 февраля 2020, 18:50

Всем привет. Как сделать между блоками отступ?

Вот что у меня есть

Нужно чтобы было так

мой код:

<div class="col-lg-3 blocks-politic">
            <?= Html::img(Url::to('/uploads/politics/9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p class="politic-name">Петро Порошенко</p>
            <p class="politic-position">Президент</p>
        </div>
        <div class="col-lg-3 blocks-politic">
            <?= Html::img(Url::to('/uploads/politics/a521671ed3207abf6735d35b1b9a9b0a_800px-Yulia_Tymoshenko_2018_Vadim_Chuprina.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p class="politic-name">Петро Порошенко</p>
            <p class="politic-position">Президент</p>
        </div>
        <div class="col-lg-3 blocks-politic">
            <?= Html::img(Url::to('/uploads/politics/9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p class="politic-name">Петро Порошенко</p>
            <p class="politic-position">Президент</p>
        </div>
        <div class="col-lg-3 blocks-politic">
            <?= Html::img(Url::to('/uploads/politics/a521671ed3207abf6735d35b1b9a9b0a_800px-Yulia_Tymoshenko_2018_Vadim_Chuprina.jpg'), ['alt' => '9859aeecafa753b42b613e63d4872b54_presydent_ua.jpg']) ?>
            <p class="politic-name">Петро Порошенко</p>
            <p class="politic-position">Президент</p>
        </div>
Answer 1

Задать внешние отступы блокам .col-lg-3 не получится (вернее, получится, но тогда это сломает сетку), поэтому внутри них лучше сформировать отдельные блоки .blocks-politic и уже работать с ними:

.blocks-politic { 
  box-shadow: 1px 2px 5px gray; 
  margin: 15px; 
  padding: 15px; 
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> 
<div class="row no-gutters"> 
  <div class="col-lg-3"> 
    <div class="blocks-politic"> 
      <img src="https://mtdata.ru/u21/photoDC4B/20597497837-0/original.jpg" alt="" class="img-fluid rounded-circle" /> 
      <p class="politic-name">Володимир Зеленський</p> 
      <p class="politic-position">Президент</p> 
    </div>  
  </div> 
  <div class="col-lg-3"> 
    <div class="blocks-politic"> 
      <img src="https://mtdata.ru/u21/photoDC4B/20597497837-0/original.jpg" alt="" class="img-fluid rounded-circle" /> 
      <p class="politic-name">Володимир Зеленський</p> 
      <p class="politic-position">Президент</p> 
    </div> 
  </div> 
  <div class="col-lg-3"> 
    <div class="blocks-politic"> 
      <img src="https://mtdata.ru/u21/photoDC4B/20597497837-0/original.jpg" alt="" class="img-fluid rounded-circle" /> 
      <p class="politic-name">Володимир Зеленський</p> 
      <p class="politic-position">Президент</p> 
    </div> 
  </div> 
  <div class="col-lg-3"> 
    <div class="blocks-politic"> 
      <img src="https://mtdata.ru/u21/photoDC4B/20597497837-0/original.jpg" alt="" class="img-fluid rounded-circle" /> 
      <p class="politic-name">Володимир Зеленський</p> 
      <p class="politic-position">Президент</p> 
    </div> 
  </div> 
</div>

READ ALSO
Не работает clip-path в IE 11.0.120
CSS

Не работает clip-path в IE 11.0.120

Всем привет! Много гуглил, пробовалНе работает clip-path, не могу разобраться почему

 201
Мета-тег &ldquo;Viewport&rdquo;
CSS

Мета-тег “Viewport”

Скажите пожалуйста, возможно ли без мета-тега "Viewport" сделать сайт адаптивным(задавая медиа-запросы)? Спасибо

 251
Ошибка в работе с библиотекой gumbo
c++

Ошибка в работе с библиотекой gumbo

Полностью скопировал код с официальной странички с гитхаба - https://githubcom/google/gumbo-parser#basic-usage Единственное что поменял это #include "gumbo

 184
Задан текст, в котором входят только цифры и буквы. Определить, является ли этот текст десятичной записью числа, кратного 4?
c++

Задан текст, в котором входят только цифры и буквы. Определить, является ли этот текст десятичной записью числа, кратного 4?

Собственно трудность для меня состоит в том, что бы запихнуть в проверку слово состоящее только из цифр, то есть необходимо создать некий...

 348