Как сделать страницу аналогично https://startbootstrap.com/template-overviews/3-col-portfolio/ с boostrap 4
и angular 4
?
Изначально использовались boostrap 3
и angular 4
,
пытался сделать страницу по примеру, в котором используется bootstrap 4
https://startbootstrap.com/template-overviews/3-col-portfolio/
https://blackrockdigital.github.io/startbootstrap-3-col-portfolio/
вот мои попытки с моей версией boostrap 3
http://jsfiddle.net/96thessa/4/
здесь вроде бы все работает аналогично, но если добавляется angular
, место под изображение растягивается на высоту всего блока, а текст съезжает.
при использовании angular
происходит следующее https://i.stack.imgur.com/bX37g.jpg размеры пустой картинки: https://i.stack.imgur.com/rsLYH.jpg
вначале блоки отображаются аналогично http://jsfiddle.net/96thessa/4/
но через мгновение пустая картинка занимает всю высоту блока и выталкивает текст ниже границы блока.
С bootstrap 4
ситуация аналогичная.
Страница - компонент angular
, соответственно, boostrap
скрипт и стили подгружаются в индексе, а стиль самого компонента содержит правила для классов card
, card-img-top
и т.д. На jsfiddle.net не знаю, как эти все нюансы воспроизвести с учетом angular
. Возможно, angular
вносит смуту? Влияет ли порядок загрузки стилей на расчет размера картинки? Или boostrap
не стоит подключать через link
и script
в html
файле, а лучше каким-то другим способом? Влияет ли angular
на отображение изображений таким образом? В стилях в инспекторе браузера не увидел ничего дополнительного, что бы могло исказить отображение. Пробовал использовать изображение, не обрамленное ссылкой a
, результат тот же.
Update: архив тестовые исходники
Update: пока костыльное решение - не показывать несуществующие изображения (display: none
), но блоки все равно почему-то растягиваются больше, чем нужно, в высоту. Пытался заменить margin
-ы на padding
-и, эффект не особо изменился, автоматический расчет высоты блока происходит неверно, я полагаю, проблема не в изображениях, а в самих блоках.
Update: пытаюсь устранить конфликт angular и bootstrap, используя ng-bootstrap. Выполнил установку npm install --save @ng-bootstrap/ng-bootstrap
, убрал подключение bootstrap.min.js
и jquery.min.js
, оставив только подключение bootstrap.min.js (4.0.0-beta.2)
. В app.module.ts
внес изменения:
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
...
imports: [
...
NgbModule.forRoot(),
...
],
providers: [
...
],
bootstrap: [AppComponent]
})
...
Высота блоков по-прежнему рассчитывается некорректно.
Update: добавил стили
.h-100[_ngcontent-c3] { height: auto !important; }
.h-100 { height: auto!important; }
.h-100[_ngcontent-c4] { height: auto !important; }
.container[_ngcontent-c3] .card[_ngcontent-c3] { height: auto !important; }
и убрал
.h-100 { height: 100%!important; }
результат:
https://i.stack.imgur.com/BCKKB.png
Внешние дивы для блоков имеют корректную высоту, но .card сжимается по контенту по высоте, и соседние колонки не выравниваются в итоге по высоте, хотя стиль height: auto !important;
применяется. Проверял в chrome, firefox. Искомая страница, с которой сделан скриншот Ссылка на страницу