Basic layout for the catalog of elements
Use classes flex d-flex flex-wrap. In this case, the elements will have the same height.
Example:
<div class="d-flex flex-wrap s1">
<div>1111111 111111111111 222222222222 2222222222222 3333 444445 5555555 66666 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 3333 444445 5555555 66666</div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 3333 444445 5555555 66666</div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 3333 444445 5555555 66666 3333 444445 5555555 66666</div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
<div>1111111 111111111111 222222222222 2222222222222 </div>
</div>
CSS (the main thing is to set the width of the element):
.s1{background: #fcc;}
.s1>div{background: #aaf; border: solid 1px #ccc; padding:10px; width: 200px; }
Note: in some cases, the layout cannot be changed, in this case we use CSS to install flex:
.s2{background: #fcc; display: flex; flex-wrap: wrap;}
More about Bootstrap flex - https://getbootstrap.com/docs/4.0/utilities/flex/
Falcon Space is a functional web development platform on a narrow stack MS SQL/Bootstrap. Falcon Space Gettting started
- Management
- Falcon Space Foundation
- Basic components
- Falcon Space Features
- Коммуникация с пользователем
- Дизайн, стилизация
- Integrations
- Каталоги Universal lists-catalogs (list) Yandex YML integration. Import-export a product catalog in YML How to make a List directory with external markup Import of goods via XML files (YML, СML, etc.). Integration with 1C Basic layout for the catalog of elements Как провести массовую обработку картинок (качество, размеры) Проблема избыточной выборки в List и Catalog Создание сущностей для учета со своим набором полей (из editor, без SQL)
- Навигация
- Документы
- Additional component
- Продвижение, SEO
- Системные моменты
- HOWTO
- HOWTO Tables
- HOWTO Forms
- Working with SQL
- HOWTO JS
- HOWTO Layout
- Solve problems
Falcon Space Platform
This is a reduction in the cost of ownership
at the expense of fewer people to support
This is a quick change
while using the program
This is a modern interface
full adaptation for mobile devices
Note
- Falcon Space Video
- Platform features demo will allow you to understand how this or that component looks and works
- Have a question? Write to the chat at the bottom right