5

Как сделать страницу аналогично 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. Искомая страница, с которой сделан скриншот Ссылка на страницу

1 ответ 1

6
+150

Вы не указали стили к классу .row

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Результат:

введите сюда описание изображения

Обновление 0.0.1:

На предоставленном ресурсе возможно поправить верстку внеся вот такие изменения:

Удалите css код:

.h-100[_ngcontent-c3] {
     height: 100% !important; 
}
.h-100 {
     height: 100%!important; 
}   

Если нет возможности удалить, замените на height: auto important;

После для выравнивания вы можете написать:

.portfolio-item[_ngcontent-c3] {
    margin-bottom: 30px;
    display: flex;
}   

И если размер картинок будет всегда один сделать вот так:

.card.h-100 img {
    max-height: 200px;
}

В итоге вы получите вот такой результат:

Вариант №1 введите сюда описание изображения С картинкой но битой ссылкой

Вариант №2 введите сюда описание изображения Полностью без картинки(без тега < img >)

19
  • 1
    Может быть что то не так с вашим "angular 2", не могу запустить с angular 2 31 окт 2017 в 18:11
  • 1
    Посмотрите в стилях, возможно где то есть конфликт. Ссылка imgur.com/9IZ1Jvx у меня не открывается. 31 окт 2017 в 18:13
  • 1
    Есть ли возможность залить на рабочий сервер проект и предоставить ссылку? 31 окт 2017 в 19:00
  • 1
    Наверное происходят конфликты между angular и bootstrap. Полезные ссылки: angular-ui.github.io Ссылка - Похожая проблема. Так же интересно описывает похожую ситуацию вот тут - ссылка 6 ноя 2017 в 1:29
  • 1
    @Emm на сервере все просто, удалите css код: .h-100[_ngcontent-c3] { height: 100% !important; } .h-100 { height: 100%!important; } Если нет возможности удалить, замените на height: auto important; 8 ноя 2017 в 19:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.