Как реализовать такое на bootstrap4?

113
13 января 2021, 03:30

Сначала думал, что это можно сделать через таблицы, потом понял, что не вариант. Можно было бы сделать каждый элемент отдельно, но тогда из-за паддингов начнутся проблемы с бордер, как лучше сделать их? я подключил только bootstrap-grid.

Answer 1

Тоже самое можно сделать и с бутстраповскими колонками

*{ 
  box-sizing: border-box; 
} 
.row{ 
  display:flex; 
  flex-wrap:wrap; 
} 
.item{ 
  width: calc(100% / 3); 
  border-right:1px solid; 
  padding-top: calc(100% / 3) 
} 
/*убираем правую границу у каждого третьего, т.е. крайнего справа элемента*/ 
.item:nth-child(3n){ 
  border-right:none; 
} 
/*добавляем верхнюю границу начиная с 4 элемента */ 
.item:nth-child(n+4){ 
  border-top:1px solid; 
}
<div class="row"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

Answer 2

Стандартная разметка, пунктам задаем обводку по левому и нижнему краю со смещением в те же стороны на толщину обводки, а обертки для этих пунктов задаем overflow: hidden;, чтобы обрезать лишнее:

.item { 
  padding: 2rem; 
  font-size: .75rem; 
  border-left: 1px solid #000; 
  border-bottom: 1px solid #000; 
  margin-left: -1px; 
  margin-bottom: -1px; 
} 
 
.section-inner { 
  overflow: hidden; 
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
   
<div class="section text-center py-4"> 
  <div class="container"> 
    <div class="section-inner"> 
      <div class="row no-gutters"> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
        <div class="col-sm-6 col-md-4"> 
          <div class="item"> 
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, recusandae. 
            </p> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</div>

READ ALSO
Sass ссылка на родителя в псевдоклассе
CSS

Sass ссылка на родителя в псевдоклассе

почему в псевдоклассе не работает ссылка на родителя? И как это вылечить?

 138
Рисование на виджете вне функции paintEvent ()
c++

Рисование на виджете вне функции paintEvent ()

Возможно ли рисовать на виджете при помощи QPainter вне функции paintEvent ()? В документации написано, что из всех стандартных бэкэндов, QWidget единственный,...

 129
Как отладить редкий access violation c++
c++

Как отладить редкий access violation c++

Приложение установлено у множества клиентов заказчикаВылетает редко, не у всех и не сразу после запуска

 235
Ошибка в коде С++ Run-Time Check Failure #2 - Stack around the variable &#39;arr&#39; was corrupted
c++

Ошибка в коде С++ Run-Time Check Failure #2 - Stack around the variable 'arr' was corrupted

Очевидная проблема - проверки на выход за пределы массивов происходит до инкремента индекса элемента массива, а не после:

 125