3

Как сделать отступ между этими блоками как показано на 2 скриншоте? Margin не работает, из-за Padding'а нельзя выделять верхние блоки

Прикрепляю разметку:

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

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

div.block6 {
  margin-top: 3%;
  float: left;
  width: 100%;
  min-height: 800px;
  background: url(../img/block6bg.png)repeat center center;
}

.circleproduct {
  width: 20px;
  height: 20px;
  background: #ff9800;
  border-radius: 50px;
  position: absolute;
  margin-top: 65%;
  transition: 0.5s;
}

p.product {
  font-family: "Roboto", sans-serif;
  display: inline-block;
  color: #ff9800;
  font-size: 1.5em;
  margin-top: 10%;
}

p.producttext {
  font-family: "Roboto", sans-serif;
  display: inline-block;
  color: #eeeeee;
  position: relative;
  left: 14%;
}
<div class="block6">
  <div class="container">

    <div class="row">
      
        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/1.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-6">
            <p class="product">СМАРТ-ТЕРМИНАЛ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для тех, кому не нужен сканер штрихкодов</p>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/4.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-6">
            <p class="product">СМАРТ-ТЕРМИНАЛ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для торговцев крепким алкоголем</p>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/2.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-6">
            <p class="product">СТАНДАРТ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для магазинов, кафе, пивных и салонов — всех, 
            кто не торгует крепким алкоголем</p>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/5.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-7">
            <p class="product">СМАРТ-ТЕРМИНАЛ БЕЗ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для тех, кто пока не обязан переходить 
            на новый порядок — услуги, патент, ЕНВД. 
            Когда понадобится, дополните комплект 
            фискальным накопителем.</p>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/4.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-6">
            <p class="product">СТАНДАРТ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для магазинов, кафе, пивных и салонов —
            всех, кто не торгует крепким алкоголем</p>
          </div>
        </div>

        <div class="col-md-6 col-xs-12">
          <div class="col-md-3">
            <img src="img/fn/6.png" class="product" alt="">
          </div>
          <div class="col-md-1">
            <div class="circleproduct"></div>
          </div>
          <div class="col-md-6">
            <p class="product">СТАНДАРТ БЕЗ ФН</p>
          </div>
          <div class="col-md-8">
            <p class="producttext">Для тех, кто еще не переходит на новый 
            порядок — услуги, патент, ЕНВД, но 
            использует сканер штрихкодов в работе. 
            Фискальный накопитель можно вставить позже</p>
          </div>
        </div>

      </div>

    </div>
  </div>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

3
  • а просто дописать <br> в нужном месте разметки не подходит? 4 июн 2017 в 21:36
  • @РусланДраган Будут советы получше, с радостью выслушаю.
    – user234223
    4 июн 2017 в 21:37
  • @user235223, хорошо, смотрите, в четвертом блоке вы промахнулись цифрой видать и поставили col-md-7 вместо col-md-6. Во-вторых, margin-bottom работает допустим для .producttext. А почему margin не работает для <div class="col-md-6 col-xs-12"></div>? 4 июн 2017 в 21:51

1 ответ 1

3
  1. Бутстрап подразумевает, что колонки лежат внутри ряда. Вложенные колонки — внутри вложенного ряда. А на самом верху — контейнер:
    .container > .row > .col-... > .row > .col-...
  2. Колонкам задан float: left, а когда внутри блока все потомки плавают, то блок думает, что его высота равна нулю, и начинаются проблемы с вертикальными отступами. Поэтому бутстрап задаёт своим рядам стили, которые растягивают их до высоты плавающих внутри колонок. Добавьте промежуточный ряд, и сможете применять маржин к ряду.
  3. У картинок и заголовков один и тот же стиль. Это непонятно и неудобно.
  4. Заголовок и текст можно поставить в одну колонку, а кружок сделать псевдоэлементом к подзаголовку. Вёрстка станет понятнее, настраивать адаптивность будет проще и окажется меньше поводов для случайных опечаток.

Например:

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');

.product {
  margin: 30px 0 48px;
}
.product__about {
  padding-left: 45px;
  padding-top: 18px;
}
.product__about > h3 {
  color: orange;
  font-size: 21px;
  font-weight: bold;
  margin: 0 0 9px;
  position: relative;
}
.product__about > h3:before {
  content: '\2B24';
  display: block;
  margin-right: 18px;
  position: absolute; top: 0; right: 100%; 
}
.product__about > p {
  font-size: 16px;
  position: relative;
}
.product__image > img {
  border-radius: 50%;
  display: block;
  width: 100%;
}
<div class="container">
  <div class="row">
    <div class="col-sm-6">
      <div class="row product">
        <div class="col-xs-4 product__image">
          <img src="//placehold.it/300x300/369/?text=%20" alt="">
        </div>
        <div class="col-xs-8 product__about">
          <h3>Заголовок</h3>
          <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="row product">
        <div class="col-xs-4 product__image">
          <img src="//placehold.it/300x300/369/?text=%20" alt="">
        </div>
        <div class="col-xs-8 product__about">
          <h3>Заголовок</h3>
          <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="row product">
        <div class="col-xs-4 product__image">
          <img src="//placehold.it/300x300/369/?text=%20" alt="">
        </div>
        <div class="col-xs-8 product__about">
          <h3>Заголовок</h3>
          <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст.</p>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="row product">
        <div class="col-xs-4 product__image">
          <img src="//placehold.it/300x300/369/?text=%20" alt="">
        </div>
        <div class="col-xs-8 product__about">
          <h3>Заголовок</h3>
          <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст.</p>
        </div>
      </div>
    </div>
  </div>
</div>

Ваш ответ

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

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