Блог

Главная - Вопросы по программированию - Обработка полей для сетки элементов с помощью Lobotomized Owl

Обработка полей для сетки элементов с помощью Lobotomized Owl

#css

#css

Вопрос:

Технология lobotomized owl хороша для вертикального списка элементов (скажем, сложенного списка карточек на мобильных устройствах), но как ее использовать для сетки элементов (скажем, по 3 карточки в строке на рабочем столе)?

 <div class="container">
  <div class="row">
    <div class="col-12 col-lg-4"><span>Card 1</span></div>
    <div class="col-12 col-lg-4"><span>Card 2</span></div>
    <div class="col-12 col-lg-4"><span>Card 3</span></div>
    <div class="col-12 col-lg-4"><span>Card 4</span></div>
    <div class="col-12 col-lg-4"><span>Card 5</span></div>
  </div>
</div>

.row > *   * {
  margin-top: 20px;
}

Проверьте codepen здесь:https://codepen.io/anon/pen/MxxoMR
(в примере я разместил 5 карточек, но, очевидно, проект динамический, поэтому я не знаю, сколько там будет карточек)

Вы видите, что когда карты уложены в стопку, это работает хорошо, но когда у меня больше карт в строке, это не так: у карты 2 и карты 3 есть margin-top, в то время как они не должны его получать.

Как вы справляетесь с этой ситуацией?

Ответ №1:

Просто учитывайте margin-bottom для всех карточек и учитывайте отрицательное поле для основного контейнера:

 .row > * {
  margin-bottom: 20px;
}

.row {
  margin-bottom:-20px;
}

/*styling*/
span {
  background: #ddd;
  display: block;
  width: 100%;
}  
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<div class="container">
  <div class="row">
    <div class="col-12 col-lg-4"><span>Card 1</span></div>
    <div class="col-12 col-lg-4"><span>Card 2</span></div>
    <div class="col-12 col-lg-4"><span>Card 3</span></div>
    <div class="col-12 col-lg-4"><span>Card 4</span></div>
    <div class="col-12 col-lg-4"><span>Card 5</span></div>
  </div>
  <div class="row">
    <div class="col-12 col-lg-4"><span>next row</span></div>
    <div class="col-12 col-lg-4"><span>next row</span></div>
    <div class="col-12 col-lg-4"><span>next row</span></div>
  </div>
</div>

Комментарии:

1. Извините, но я должен использовать технологию lobotomized owl (которая использует * * и margin-top). Использование margin-bottom создает некоторые проблемы в моем макете.

2. @FredK как вы можете видеть, техника, которую вы используете, не очень хороша, вот почему я привел другую. Почему вы должны использовать это ? нет никаких причин быть обязанным использовать какую-либо технику. Поделитесь своим полным вариантом использования и покажите нам проблему, с которой вы столкнулись (на основе вашего фактического кода проблемы нет)

3. В вашем решении Card 4 имеет margin-bottom, это бесполезно, и добавлять поле мне не нужно. Очевидно, что в примере я разместил 5 карточек, но проект динамический, поэтому вы не знаете, сколько там будет карточек.

4. @FredK проверьте обновление, мы можем легко удалить это поле

5. Темани, твое решение могло бы сработать, но я специально спросил, как решить с помощью lobotomized owl. Кроме того, использование отрицательного поля не является элегантным решением. Ваше решение больше похоже на обходной путь.