Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.90/29: Рейтинг темы: голосов - 29, средняя оценка - 4.90
 Аватар для Kodzy
8 / 6 / 8
Регистрация: 04.01.2018
Сообщений: 113

Как подогнать высоту блоков? (Bootstrap)

28.04.2018, 12:45. Показов 5752. Ответов 1
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Ниже приведу код верстки и скриншот, на котором указаны нюансы. Основной вопрос - как подогнать блоки под одну высоту (высоту наибольшего в ряду).
Вторичный - как избавиться от отступов (своеобразных абзацев). Не хотелось бы задавать жесткий размер для изображений, чтобы потерять соотношение.

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
echo "<div class='container'> <div class='row'>";
foreach ($posts as $post) {
    $text = mb_substr($post->postText,0,130).'...';
    $link = Yii::$app->urlManager->createUrl(['site/postpage', 'id'=> $post->id]);
    echo "
        
            <div class='col-lg-4  panel panel-default'>
                <div class'panel-body'>
                    <div class='col-lg-12'>
                        <a href ='$link'> <h3>$post->postName</h3> </a>         
                    </div>
                    
                    <div class='row'>
                        <div class='col-lg-5'>
                            <image src=$post->postImage width='100%' height='auto' alt=$post->postName/>
 
                            <div class='col-lg-12'>
                                <p>Автор: $post->postAuthor</p>
                            </div>
 
                        </div>
                        
                        <div class='col-lg-7'>
                            <div class='col-lg-12'>
                                <p>$text</p>
                            </div>
                            <div class='col-lg-12'>
                                <p>Оценок: $post->postLike</p>
                            </div>
                        </div>
                    </div>
                    
                </div>
                
            </div>
        
    ";
}
echo "</div></div>";
Миниатюры
Как подогнать высоту блоков? (Bootstrap)  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
28.04.2018, 12:45
Ответы с готовыми решениями:

Подогнать высоту блоков независимо от кол-ва теста в них
сайт, там есть блок &quot;наши услуги&quot; и &quot;отзывы&quot;. Там у блоков разная высота. Как сделать так, чтобы при двух строках текста блок оставался...

Как подогнать высоту страницы под высоту экрана?
Здравствуйте, друзья! Подскажите, пожалуйста, как сделать так, чтобы высота страницы (например вот этой -...

Есть ли в Twitter Bootstrap класс позволяющий адаптивно выравнивать высоту блоков?
Суть задачи: На странице расположен график и панель справа от него. Текст отображаемый в панели переодически будет меняться,...

1
333 / 309 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
28.04.2018, 13:02
Цитата Сообщение от Kodzy Посмотреть сообщение
как подогнать блоки под одну высоту (высоту наибольшего в ряду)
Модифицируйте row, добавьте следующие стили:
CSS
1
2
3
4
.mod-row{
display: flex;
flex-wrap: wrap;
}
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.04.2018, 13:02
Помогаю со студенческими работами здесь

Как сделать одинаковую высоту блоков?
делаю адаптивную верстку есть два блока сфлоаченых влево. Один при наполнении контентом становиться выше, хочется чтобы у второго столбика...

Как сделать высоту блоков одинаковой
Здравствуйте, помогите выстроить блоки в нужной последовательности. В основном блоке, с шириной 1280px, нужно вместить в ряд 3 блока, так...

Как сделать высоту 100% относительно родителя bootstrap 3
Здравствуйте! http://rghost.ru/7B5nJSZGV/image.png Выше графическое представление. Есть row которая содержит col-md-10 и...

Как сделать section на всю высоту экрана, работаю в bootstrap
Такая вот проблемка, скачал себе на локальный сервер бесплатный готовый шаблон bootstrap, вот он...

Как можно поддерживать высоту одинаковой для каждого из блоков?
Доброго времени суток! В коде ниже три блока, как три колонки: левый, центральный (основной, более широкий), правый. Можно ли прописать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью 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
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru