На bootstrap ломается сетка если разный контент в блоках

@Alexodiy · Регистрация: 22.02.2017

Студворк — интернет-сервис помощи студентам

Всем приветы.

На bootstrap ломается сетка в зависимости от кол-ва контента, подскажите как исправить, фиксить по высоте не вариант

@aj17 · 23.02.2017, 19:37

Все карточки товара должны быть единой высоты, это основное правило для использование сетки бутстрап

@Alexodiy · 23.02.2017, 19:46 **[ТС]**

Сообщение от aj17

Все карточки товара должны быть единой высоты, это основное правило для использование сетки бутстрап

aj17, нет разобрался, если на последнем добавлять <div class="clearfix"></div> но складывается вопрос как его правильно использовать, если на других разрешениях например будет отображено не по 3, а по 2ва блока

@mrtoxas · 23.02.2017, 21:41

Alexodiy, bootstrap_grid_examples

@aj17 · 23.02.2017, 21:51

Сообщение от Alexodiy

aj17, нет разобрался, если на последнем добавлять <div class="clearfix"></div> но складывается вопрос как его правильно использовать, если на других разрешениях например будет отображено не по 3, а по 2ва блока

в таком случае, вы можете конечно добавлять в разметку clearfix после второго блока и третьего в ряде, а на нужных разрешениях скрывать/показывать, но я бы конечно так не стал так делать, так как это лишнее нагромождение кода...

@Fourd · 24.02.2017, 06:15

как мне кажется это один из минус использования float в bootstrap'е
может вам стоит задать свою разметку с использованием display: inline-block

@Alexodiy · 24.02.2017, 15:11 **[ТС]**

aj17, согласен по поводу нагромождения кода, но в бутстрапе всегда так. Можно добавлять clearfix в разметку, но это геморойно, а если натягиваешь верстку на WordPress например, опять же надо условия задавать чтобы clearfix появлялся в нужном месте. Например, если разметка такая - col-lg-3 col-md-4 col-sm-6 и нужно указывать визибл clearfix под нужном блоке, очень напряжно так.

Fourd, могу конечно сделать свою сетку, но хочется верстать быстро используя какой либо фрейм. На сегодняшний день Bootstrap мне более понятен

Может быть есть какие нибудь варианты по использованию более умной сетки, аналоги бутстрапа, возможно вы мне подскажете

@aj17 · 24.02.2017, 15:47

Сообщение от Alexodiy

Может быть есть какие нибудь варианты по использованию более умной сетки, аналоги бутстрапа, возможно вы мне подскажете

на самом деле есть вариант, который я лично использовал и большой эффектиностью)
Класс flex_box добавляете для непосредственного родителя, у меня это был .row, класс flex_item добавляете к элементы плитки, у меня это был col-md-**. Нужно что бы приоретитет был у этих стилей выше, чем у сетки, что бы перекрывало стили бутстапа, таким образом вы получите сетку, которая будет работать на брикпоинтах фрейморвка, но основа формирования сетки будет не float а flex

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.flex_box, .flex_item {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    align-items: flex-start;
    float: none;
}

@Fourd · 24.02.2017, 15:55

HTML5
1
2
3
4
5
6
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, maiores.</div>
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam accusamus officia, harum, exercitationem inventore modi? Ad odio mollitia, aliquid enim.</div>
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum aperiam nemo doloremque.</div>
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, magni sunt.</div>
<div class="random-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, reprehenderit.</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.random-height {
  padding: 10px;
  margin-bottom: 10px;
  display: inline-table;
  width: 100%;
  border: 2px solid #000
}
 
@media (min-width: 768px){
  .random-height{
    width: 30%;
  }
}

песочница, это не занимает много времени)) но мне и самому любопытно как вашу проблему можно еще обыграть

@Alexodiy · 24.02.2017, 16:19 **[ТС]**

aj17, крутяк, спасибо за объяснение, я бы сам не догадался, все просто и легко. Проблема решена.

@dimon888951 · 24.02.2017, 17:23

Может кому пригодиться, бутстрап использую при верстке если это требует заказчик, а если никак неограничен, то пользуюсь Susy, настраиваемая, гибкая сетка, одно удовольствие верстать.

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Alexodiy 6 / 6 / 2 Регистрация: 22.02.2017 Сообщений: 125

	На bootstrap ломается сетка если разный контент в блоках 23.02.2017, 19:28. Показов 6066. Ответов 10 Метки bootstrap, верстка html css (Все метки) Всем приветы. На bootstrap ломается сетка в зависимости от кол-ва контента, подскажите как исправить, фиксить по высоте не вариант Миниатюры 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	23.02.2017, 19:37
	Все карточки товара должны быть единой высоты, это основное правило для использование сетки бутстрап 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.02.2017, 21:41
	Alexodiy, bootstrap_grid_examples 0

@Fourd 98 / 98 / 46 Регистрация: 21.03.2012 Сообщений: 378
	24.02.2017, 06:15
	как мне кажется это один из минус использования float в bootstrap'е может вам стоит задать свою разметку с использованием `display: inline-block` 0

@Alexodiy 6 / 6 / 2 Регистрация: 22.02.2017 Сообщений: 125
	24.02.2017, 15:11 [ТС]
	aj17, согласен по поводу нагромождения кода, но в бутстрапе всегда так. Можно добавлять clearfix в разметку, но это геморойно, а если натягиваешь верстку на WordPress например, опять же надо условия задавать чтобы clearfix появлялся в нужном месте. Например, если разметка такая - col-lg-3 col-md-4 col-sm-6 и нужно указывать визибл clearfix под нужном блоке, очень напряжно так. Fourd, могу конечно сделать свою сетку, но хочется верстать быстро используя какой либо фрейм. На сегодняшний день Bootstrap мне более понятен Может быть есть какие нибудь варианты по использованию более умной сетки, аналоги бутстрапа, возможно вы мне подскажете 0

@Alexodiy 6 / 6 / 2 Регистрация: 22.02.2017 Сообщений: 125
	24.02.2017, 16:19 [ТС]
	aj17, крутяк, спасибо за объяснение, я бы сам не догадался, все просто и легко. Проблема решена. 0

@dimon888951 20 / 19 / 5 Регистрация: 04.10.2012 Сообщений: 223
	24.02.2017, 17:23
	Может кому пригодиться, бутстрап использую при верстке если это требует заказчик, а если никак неограничен, то пользуюсь Susy, настраиваемая, гибкая сетка, одно удовольствие верстать. 1

На bootstrap ломается сетка если разный контент в блоках

Решение