Delgus
@Delgus

Как добавить margin между карточками и при этом не разорвать верстку?

Как добавить margin между карточками и при этом не разорвать верстку? Я хочу чтоб было вот так
5efd8cc95bebd686119087.png

А получается так
5efd8d0547599303859415.png

Пример в песочнице
https://codepen.io/delgus/pen/wvMqvER

Код

<div class="container">
    <div class="row">
      <div class="my-class col-4 card">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="my-class col-4 card">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="my-class col-4">
        <div>
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
</div>



Помогите пожалуйста
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
Пригласить эксперта
Ответы на вопрос 2
madolu2
@madolu2
Python разработчик
Если интересно решение на Bootstrap, то это класс m(argin)
m - отступы по всем сторонам
mt - top
ml - left
mr - right
mb -bottom
пример mt-(число от 1 до 5)
Ответ написан
@Just__Den
FULL STACK
никогда не лепи дополнительные стили на сетку, где стоят .col

<div class="container">
    <div class="row">
      <div class="col-4 px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="col-4 px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
      <div class="col-4  px-3">
        <div class="card my-class">
          Test
          suifyuwiygfuisygusdifyg
          weiurwoeurwoeur
          ewoiruwoeurioweruowei
          weioruweoruoweiru
        </div>
      </div>
</div>
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы