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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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