Bootstrap 3 (тепер Bootstrap 4) - дивовижний CSS-фреймворк, який робить життя веб-розробників будь-якого рівня простіше. Коли я був новачком, і вперше знайомився з Bootstrap, то використовував всі його можливі властивості, і намагався хакнути, щоб отримати те, що буде працювати так, як я хочу. Тепер, з більшим досвідом, я в основному використовую їх ресет та grid-систему. Я рідко змінюю їх основні функції.
Я часто зустрічаю розробників, які стикаються з проблемою, коли потрібно зберегти висоту у всіх колонках, зберігши адаптивність. Тому вирішив поділитися деякими з методів, які я використовую, та трюками, яким мене навчили інші розробники та друзі, а також розповісти про загальний напрямок, за яким Bootstrap 4 слідує, щоб вирішити ці проблеми.
Однакові колонки? Не проблема.
Я зробив демо на CodePen, щоб проілюструвати проблему, коли контент в колонках має різну довжину і як це погано впливає на дизайн. Спочатку деякі швидкі нотатки:
- Padding 25px додається до верху і низу всіх елементів Bootstrap
- Тонкий бордер огортає всі
.cols - Використовуються різні бекграунди, щоб побачити, як усе скупчується одне на інше, і як це все працює
{full-post-img}
Спосіб 1: Використання JavaScript або MatchHeight.js
Перше рішення, яке я збираюся використовувати, - JavaScript. Досить просто задіяти JS, щоб відрегулювати висоту колонок. Найкращий, найпростіший, і "найофіційніший" JS-спосіб - використовувати matchHeight.
Є плюси і мінуси даного способу. За допомогою JavaScript, ви отримуєте високу підтримку крос-браузерності, ви також будете мати більший pageload і це не буде відбуватися тільки тоді, коли DOM готовий чи завантажений в залежності від того, коли ви викликаєте його. Мені подобається цей підхід, тому що я вважаю, що краще пов'язувати висоту не з колонками, а з контентом в них.
Більше інформації про matchHeight.js:
Найшвидший спосіб почати - просто посилатися на CDN-лінк після JQuery:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.0/jquery.matchHeight-min.js"><script>
MatchHeight супер проста у використанні і по суті має дві основні опції (серед купи інших речей):
- Регулює висоту на різних рядках
- Регулює висоту всюди
Регулювання висоти на різних рядках
Так регулюється висота на різних рядках:
$(function() {
$('.box').matchHeight();
});
{full-post-img}
Глобальне регулювання висоти
Так регулюється висота всіх елементів на сторінці:
$(function() {
$('.box').matchHeight(false);
});
{full-post-img}
Не забувайте про адаптивність
Якщо ви оберете один з цих методів, переконайтеся, що відключили підтримку мобільних девайсів, так як висота стовпців там не має значення.
Ви можете просто перевизначити фіксовану висоту в місці брейкпоінту. Ці зміни базовані на xs, sm, md, або lg. Ось демо при використанні col-sm-*:
@media only screen and (max-width : 767px) {
.box {
height: auto !important;
}
}
Спосіб 2: Зробіть, щоб рядок думав, що він таблиця
Слово "таблиця", як правило, приводить до купи негативу у фронт-енд розробників, але насправді не так погано використовувати такий метод, якщо робити це правильно. Багато людей навіть не знають, що можна змусити div та його елементи вести себе як table.
Іноді ви хочете зробити це, тому що стовпчики в елементі table мають відрегульовану висоту по дефолту. Ось клас CSS-утиліти, щоб "обдурити" рядки, змусивши їх думати, що це table, коли ви використовуєте col-sm-*:
@media only screen and (min-width : 768px) {
.is-table-row {
display: table;
}
.is-table-row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
<div class="row is-table-row">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
{full-post-img}
Вам слід виконувати налаштування грунтуючись на розмірі стовпця, який ви використовуєте. Так що є сенс створити кілька класів утиліт: is-xs-table-row, is-sm-table-row, is-md-table-row, та is-lg-table-row або просто вручну переконайтесь, що ви зробили адаптивність.
Ви також помітите, я додав трохи стилів, так як стовпці тепер мають висоту (не звичайний елемент .box). Якщо ви обираєте цей підхід, вам потрібно буде усе добре продумати.
Спосіб 3: Трюк з використанням негативного margin і великого padding
Цей підхід дійсно дуже крутий і, ймовірно, є кращим рішенням для більшості людей. Я не знаю, хто його придумав, але це дуже креативно і має багато переваг:
- Працює з адаптивом з деякими нюансами
- Потребує не дуже багато зусиль від розробника, щоб переконатися, що усе буде добре працювати в різних випадках
- Працює на всіх стовпцях, незалежно від їх розмірів
Хоча цей спосіб також має і недоліки:
- Неможливе позиціонування елементів на absolute знизу (див. codepen-стилі на
.btn). - Вимагає, щоб рядок був
overflow: hidden
Ось клас утиліти для нього:
.row.match-my-cols {
overflow: hidden;
}
.row.match-my-cols [class*="col-"]{
margin-bottom: -99999px;
padding-bottom: 99999px;
}
<div class="row match-my-cols">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
{full-post-img}
Як це працює?
Воно додає 99999px висоти до стовпця через padding, а потім використовує негативний margin. Тоді .row просто приховує все, що виходить за його межі.
Спосіб 4: Використання Flexbox
Flexbox - дар CSS3 для найдратівливіших фронт-енд розробників. Це унікальний інструмент для макетів і "грідінгу" за допомогою CSS. Ви можете дізнатися більше про це тут.
Але є одна проблема. Підтримка Internet Explorer просто жахлива. IE9 і нижче має нульову підтримку, IE10 глючить, а IE11 має багато багів.
Цей метод фіксує однакову висоту, він супер простий і адаптивний - все, що достатньо для щастя розробника. Ось демо:
.row.is-flex {
display: flex;
flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
.row.is-flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
<div class="row is-flex">
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
<div class="col-sm-4">...</div>
</div>
{full-post-img}
Тільки Bootstrap 4: Flexbox
Bootstrap 4 має дві опції для його гріду: "З Flexbox" і "Без Flexbox". Якщо ви оберете опцію з Flexbox, то висота буде регулюватися автоматично.
Це демо показує усю красу даного методу:
{full-post-img}
Проблема як і раніше у підтримці браузером, також Bootstrap 4 є, на момент написання цього посту, не готовий до релізу, він все ще в альфа-версії.
Тільки Bootstrap 4: Cards
Bootstrap 4 також представив концепцію під назвою "Cards". Cards визначаються як "гнучкі і розтяжні контейнери. Вони включають в себе опції для хедерів і футерів, широке розмаїття контенту, контекстні бекграунд-кольори та потужні дисплей-опції".
Все це означає, що вони надають стилі Bootstrap для .box і його меж, які можна побачити в цих прикладах CodePen. Це дійсно круто, тому що є багато способів, відрегулювати висоту стовпців. Єдине, технічно це не частина «гріду», але воно є чудовим рішенням для незалежного регулювання висоти колонок.
Ось демо:
{full-post-img}
В Cards у Bootstrap 4 крутим є те, що якщо ви не обрали Flexbox, вони використають таблиці, щоб відрегулювати висоту стовпців. Якщо ви все ж таки обрали перше, то вони будуть використовувати Flexbox. Це одна з найцікавіших речей в Bootstrap 4 на мій погляд.
Більше ресурсів
Bootstrap - просто фреймворк. Зрештою, усе залежить від вас або розробника, який метод обирати. Ви можете використовувати всі, або деякі з них. Це дійсно не має значення, якщо ви розумієте їх плюси і мінуси.
Я особисто не люблю налаштовувати CSS на будь-якій основі bootstrap: .container, .row, .col - * - *. Я думаю, що змінювати параметри по дефолту занадто легко і нудно для розробника.
Ще немає коментарів