Я новичок в разработке внешнего интерфейса и хочу использовать полный стек, я использую Jhipster, angular и bootstrap для целей самостоятельного изучения.
После некоторой работы я успешно установил тему начальной загрузки (pulse), после некоторой работыЯ попытался создать список карт для представления некоторых данных.
К сожалению, моей работе не хватает отзывчивости, как показано на рисунке ниже в режиме планшета
Как вы видите, многое нужно сделать, и я понятия не имею, что мне делать, чтобы все это исправить
Так что я спрашиваю только о том, как исправить кнопкипроблема в моих карточках для начала, может быть, это заставит меня понять и понять, что делать в одиночку с другими проблемами (меню и фильтры)
ниже Я предоставляю весь код, который я думаюПод этим подразумевается:
Основной шаблон приложения
<jhi-page-ribbon></jhi-page-ribbon>
<div>
<router-outlet name="navbar"></router-outlet>
</div>
<div class="container-fluid">
<div class="container-fluid mt-4">
<router-outlet></router-outlet>
<router-outlet name="popup"></router-outlet>
</div>
<jhi-footer></jhi-footer>
</div>
Фрагмент кода карты в моем шаблоне кандидата
1 глобальный шаблон: весь код
<div>
<h2 id="page-heading">
<span jhiTranslate="autoEcoleV01App.candidat.home.title">Candidats</span>
<button id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-candidat"
[routerLink]="['/candidat/new']">
<fa-icon [icon]="'plus'"></fa-icon>
<span jhiTranslate="autoEcoleV01App.candidat.home.createLabel">
Create new Candidat
</span>
</button>
</h2>
<jhi-alert></jhi-alert>
<br />
<div jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
<div class="row mb-4 ml-1">
<input type="search" class="form-control col-sm-8 " autocomplete="off" placeholder="{{'autoEcoleV01App.constants.search' | translate}}"
[(ngModel)]="searchValue" />
<div class="btn-group col-sm-4">
<button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="nom">
<span jhiTranslate="autoEcoleV01App.candidat.nom">Nom</span>
<fa-icon [icon]="'sort'"></fa-icon>
</button>
<button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="prenom">
<span jhiTranslate="autoEcoleV01App.candidat.prenom">Prenom</span>
<fa-icon [icon]="'sort'"></fa-icon>
</button>
<button class="btn btn-sm float-left btn-outline-secondary col" jhiSortBy="nid">
<span jhiTranslate="autoEcoleV01App.candidat.nid">Nid</span>
<fa-icon [icon]="'sort'"></fa-icon>
</button>
</div>
</div>
<div class="row">
<div *ngFor="let candidat of (candidats | filterBy: ['nom','prenom','mere','pere','telephone','nid']: searchValue) ;trackBy: trackId"
class="col-sm-3 mb-4">
<div class="card card-focusable" style="min-height: 100%;">
<a *ngIf="candidat.photo" (click)="openFile(candidat.photoContentType, candidat.photo)">
<img [src]="'data:' + candidat.photoContentType + ';base64,' + candidat.photo"
style="max-height: 360px; max-width: 100%;"
class="card-img-top " alt="candidat image" />
</a>
<div class="card-body ">
<h4 class="card-title">{{candidat.nom}} {{candidat.prenom}}</h4>
<p class="card-text ml-1">
<span jhiTranslate="autoEcoleV01App.candidat.dateInscription">Date Inscription </span>: {{candidat.dateInscription | date:'mediumDate'}}
<br >
<span jhiTranslate="autoEcoleV01App.candidat.telephone">Téléphone </span>: {{candidat.telephone}}
</p>
<div class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit" [routerLink]="['/candidat', candidat.id, 'view' ]"
class="btn btn-info btn-sm">
<fa-icon [icon]="'eye'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
</button>
<button type="submit" [routerLink]="['/candidat', candidat.id, 'edit']"
class="btn btn-primary btn-sm">
<fa-icon [icon]="'pencil-alt'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
</button>
<button type="submit"
[routerLink]="['/', 'candidat', { outlets: { popup: candidat.id + '/delete'} }]"
replaceUrl="true" queryParamsHandling="merge" class="btn btn-danger btn-sm">
<fa-icon [icon]="'times'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
2 Толькокод карты для удобного чтения
<div class="card-body ">
<h4 class="card-title">{{candidat.nom}} {{candidat.prenom}}</h4>
<p class="card-text ml-1">
<span jhiTranslate="autoEcoleV01App.candidat.dateInscription">Date Inscription </span>: {{candidat.dateInscription | date:'mediumDate'}}
<br >
<span jhiTranslate="autoEcoleV01App.candidat.telephone">Téléphone </span>: {{candidat.telephone}}
</p>
<div class="text-right">
<div class="btn-group flex-btn-group-container">
<button type="submit" [routerLink]="['/candidat', candidat.id, 'view' ]"
class="btn btn-info btn-sm">
<fa-icon [icon]="'eye'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.view">View</span>
</button>
<button type="submit" [routerLink]="['/candidat', candidat.id, 'edit']"
class="btn btn-primary btn-sm">
<fa-icon [icon]="'pencil-alt'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.edit">Edit</span>
</button>
<button type="submit"
[routerLink]="['/', 'candidat', { outlets: { popup: candidat.id + '/delete'} }]"
replaceUrl="true" queryParamsHandling="merge" class="btn btn-danger btn-sm">
<fa-icon [icon]="'times'"></fa-icon>
<span class="d-none d-md-inline" jhiTranslate="entity.action.delete">Delete</span>
</button>
</div>
</div>
</div>