按钮组中的自举角响应性问题

时间：2019-04-14 10:07:46

标签： angular bootstrap-4 jhipster responsive bootswatch

我是前端开发的新手，我希望能完全堆砌，我使用Jhipster，angular和bootstrap进行自学。

我成功安装了启动表主题（脉冲），经过一些工作后，我试图创建一个卡片列表来显示一些数据。

不幸的是，我的工作缺乏响应能力，如下图所示在平板电脑模式下

students pane

如您所见，还有很多事情要做，我不知道该怎么解决所有问题

因此，我仅询问如何解决卡片中的按钮问题，也许这会使我理解并掌握如何独自处理其他问题（菜单和过滤器）

下面，我提供了我认为暗含的所有代码：

主要应用模板 

<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>

1 个答案:

答案 0 :(得分：0)

感谢JB Nizet的评论，我是在一条直路上走的，所以我寻找一种方法来确保有足够的空间，我的回答是断点

这是我所做的：

这是我对解决方案的实现

将该模块导入我的全局应用程序模块Expo client中，以便在所有组件中使用 

native projects

使用我的app.module.ts中的import { LayoutModule } from '@angular/cdk/layout'; @NgModule({ imports: [... LayoutModule, ...]) 

BreakpointService

最终以自己的意志使用candidat.component.ts 

import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';

@Component({
    selector: 'jhi-candidat',
    templateUrl: './candidat.component.html'
})
export class CandidatComponent implements OnInit, OnDestroy {
  someVars: any;
  small: any;
  medium: any;
  large: any;

  constructor(
    protected someServices: MyServices,
    public breakpointObserver: BreakpointObserver
  ){}

  ngOnInit() {
    this.someLogic();
    this.breakpointObserver
            .observe(['(max-width: 425px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = true;
                    this.medium = false;
                    this.large = false;
                }
                console.log('Small screen event');
            });
    this.breakpointObserver
            .observe(['(max-width: 1025px)', '(min-width: 426px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = false;
                    this.medium = true;
                    this.large = false;
                }
                console.log('Medium screen event');
            });
    this.breakpointObserver
            .observe(['(min-width: 1025px)'])
            .subscribe((state: BreakpointState) => {
                if (state.matches) {
                    this.small = false;
                    this.medium = false;
                    this.large = true;
                }
                console.log('Large screen event');
            });
    }

    cardsStyleClasses() {
        return {
            'mb-4': true,
            'col-sm-1': this.small,
            'col-sm-4': this.medium,
            'col-sm-3': this.large
        };
    }
}
相关问题
最新问题