0

введите сюда описание изображения

Как увеличить отступы между этими блоками? (При увеличении размера сетки блоки съезжают на сл. строку.

a.links {
  color: #094f83;
  position: relative;
  text-decoration: underline;
  font-size: 1.1em;
  font-family: "Open Sans Bold", sans-serif;
  font-weight: bold;
  letter-spacing: 0.5px;
  right: 30px;
}

img.linksimg {
  width: 100%;
  position: relative;
  top: 10px;
  right: 30px;
}

p.textonlinks {
  font-family: "Open Sans", sans-serif;
  font-size: 0.875em;
  position: relative;
  right: 30px;
  top: 15px;
}
<div class="col-md-12 col-xs-12">

  <div class="col-md-3 col-xs-12">
    <a href="" class="links">Тарехова Катя</a>
    <img src="img/linkspng.png" class="linksimg" alt="">
    <p class="textonlinks">
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="" class="links2">подробнее»</a>
  </div>
  <div class="col-md-3 col-xs-12">
    <a href="" class="links">Тарехова Катя</a>
    <img src="img/linkspng.png" class="linksimg" alt="">
    <p class="textonlinks">
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="" class="links2">подробнее»</a>
  </div>
  <div class="col-md-3 col-xs-12">
    <a href="" class="links">Тарехова Катя</a>
    <img src="img/linkspng.png" class="linksimg" alt="">
    <p class="textonlinks">
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="" class="links2">подробнее»</a>
  </div>
  <div class="col-md-3 col-xs-12">
    <a href="" class="links">Тарехова Катя</a>
    <img src="img/linkspng.png" class="linksimg" alt="">
    <p class="textonlinks">
      Открылась мобильная версия сайта<br> Стамотологии «Олиус» Вы можете:<br> — записываться на прием — читать новые статьи — следить за акциями...
    </p>
    <a href="" class="links2">подробнее»</a>
  </div>
</div>

4
  • Картинки нельзя уменьшить?
    – eldario
    17 июн 2017 в 12:33
  • Или сделать не col-md-3, а col-md-2 и добавить col-offset
    – eldario
    17 июн 2017 в 12:35
  • @eldario Нет, не катит. Переписал на флексах
    – user234223
    18 июн 2017 в 8:51
  • Бутстрапом так и не смог реализовать
    – user234223
    18 июн 2017 в 8:51

1 ответ 1

0

Используйте padding на блок col-md-3 и не забудьте прописать !important

padding: 30px!important;

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.