Question

我正在尝试为特定模态自定义引导程序模态宽度。我在没有帮助的情况下查看了几种资源。我开始认为我的代码开发不正确。这是我的html

这是我尝试过的所有内容：

https://www.codeply.com/go/rNFv5RJJqn/bootstrap-modal-full-screen

<ng-template class="mw-100 w-75" #createSaved let-c="close" let-d="dismiss">
  <div class="modal-header">
    <h4 class="modal-title">Saved RFPs</h4>
    <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body table-responsive">
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Event Name</th>
          <th scope="col">Event Date</th>
          <th scope="col">Event Purpose</th>
          <th scope="col">Start Time</th>
          <th scope="col">End Time</th>
          <th scope="col">Head Count</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let rfp of savedrfps; let i=index" (click)="populaterfpfromsaved(i, createSaved, createProp)">
          <td>
            {{rfp.name}}
          </td>
          <td>
            {{rfp.eventdate}}
          </td>
          <td>
            {{rfp.eventpurpose.purpose}}
          </td>
          <td>
            {{rfp.startime}}
          </td>
          <td>
            {{rfp.endtime}}
          </td>
          <td>
            {{rfp.guestcount}}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</ng-template>

我正在使用角形

发生什么事与内联样式无关。将Id与！important标志一起使用。

使用.modal-lg或使用代码中看到的引导宽度元素，模态的大小不会增加。

Answer 1

我通过将我的width属性放在modal-dialog div上来实现。像这样：

<style>
  .modalXl {width: 1250px;}
</style>

<div class="modal-dialog modalXl" role="document">

自定义引导程序4模态宽度

1 个答案: