使用 Bootstrap 4 使下拉菜单使用 100% 宽度

Question

所以这个问题让我发疯了伙计们。我使用 Boostrap 4 创建了一个下拉菜单，但是当屏幕为移动尺寸时，我使用了媒体查询。我想让我的下拉菜单在移动时使用 100%，并且我已经尝试将宽度 100% 放在某些 div 或固定位置中，但是 none 有效。这是我的屏幕：

蓝色标记的部分是我要覆盖整个屏幕的部分。

这是我的 HTML 代码：

<div class="notification-container dropdown">
  <button
    class="btn notification-button"
    type="button"
    id="dropdownMenuButton"
    data-toggle="dropdown"
    aria-haspopup="true"
    aria-expanded="false"
  >
    <i class="fa fa-bell-o"></i>
  </button>
  <div
    class="dropdown-menu dropdown-menu-right notification-container-header"
    aria-labelledby="dropdownMenuButton"
  >
    {{ notifications.length }} notificações
    <div class="notification-container-list-body">
      <ul class="list-group list-group-flush">
        <ng-template
          ngFor
          let-notification
          [ngForOf]="notifications"
          let-i="index"
        >
          <ng-template [ngIf]="notification.imagem">
            <li class="notification-container-list-body-item">
              <a
                class="list-group-item notification-container-list-body-item-image"
                routerLink="{{ notification.link }}"
              >
                <img src="{{ notification.imagem }}" alt="" />
                <div>
                  <div>
                    {{ notification.titulo }}
                  </div>
                  <div>
                    {{ notification.descricao }}
                  </div>
                </div>
              </a>
              <button
                class="btn delete-notification"
                (click)="dropdownPersist($event)"
                (click)="deleteNotification(notification.id)"
              >
                <i class="fa fa-close"></i>
              </button>
            </li>
          </ng-template>

          <ng-template [ngIf]="!notification.imagem">
            <li class="notification-container-list-body-item">
              <a
                class="list-group-item notification-container-list-body-item-noimage"
                href="{{ notification.link }}"
              >
                <div>
                  <div>
                    {{ notification.titulo }}
                  </div>
                  <div>
                    {{ notification.descricao }}
                  </div>
                </div>
              </a>
              <button
                class="btn delete-notification"
                (click)="dropdownPersist($event)"
                (click)="deleteNotification(notification.id)"
              >
                <i class="fa fa-close"></i>
              </button>
            </li>
          </ng-template>
        </ng-template>
      </ul>
    </div>
  </div>
</div>

这是我的 SCSS 代码：

p,
a {
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
}

.notification-button {
  border-color: transparent;
  box-shadow: none;

  i {
    color: #fff;
  }

  &:focus {
    i {
      color: #0ff;
    }
  }
}

.notification-container-header {
  text-align: center;
  font-size: 0.9rem;
  padding-top: 0px;
  padding-bottom: 0px;
  border-bottom: 0px;
  border-radius: 0;
  background-color: #0ff;
  color: #000;
  font-weight: 500;
}

.notification-container-list-body {
  margin-left: 3px;
  margin-right: 3px;

  ul {
    margin-bottom: 3.5px;
    max-height: 250px;
    overflow: auto;
  }
}

.notification-container-list-body-item {
  display: grid;
  background: #000;
  grid-template-columns: 1fr 0.1fr;
  padding: 10px 10px 6px 11px;
  border-bottom: 1px solid #fff;
}

.notification-container-list-body-item-image {
  background: #000;
  display: grid;
  grid-template-columns: 0.2fr 1fr;
  justify-content: center;

  img {
    height: 30px;
    width: 60px;
    padding-right: 9px;
  }

  div {
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 200px;
    color: #fff;

    &:nth-child(1) {
      font-size: 10px;
    }

    &:nth-child(2) {
      font-size: 14px;
    }
  }
}

.notification-container-list-body-item-noimage {
  @extend .notification-container-list-body-item-image;

  grid-template-columns: 1.9fr 0.1fr;

  div {
    width: 261px;
  }
}

.delete-notification {
  padding: 0;
  border-color: transparent;
  box-shadow: none;
  i {
    height: 12px;
    width: 12px;
    color: #646464;
  }

  &:focus {
    i {
      color: #646464;
    }
  }
}

@media (max-width: 576px) {
  .notification-container-header {
    margin-top: 0;
    border: 0;
  }

  .notification-container-list-body-item {
    grid-template-columns: 1.7fr 0.3fr;
    padding: 10px 10px 6px 11px;
  }

  .notification-container-list-body-item-image {
    img {
      height: 30px;
      width: 70px;
      padding-right: 9px;
      align-self: center;
    }

    div {
      color: #fff;

      &:nth-child(1) {
        font-size: 12px;
      }

      &:nth-child(2) {
        font-size: 16px;
      }
    }
  }

  .notification-container-list-body-item-noimage {
    grid-template-columns: 2.3fr 0.3fr;
  }
}

我也在用Angular9，制作动态内容。有人可以帮忙吗？

Answer 1

.notification-container-list-body {
  width: 100%; <=====================================================
  margin-left: 3px;
  margin-right: 3px;

  ul {
    margin-bottom: 3.5px;
    max-height: 250px;
    overflow: auto;
  }
}

使用 Bootstrap 4 使下拉菜单使用 100% 宽度

Make dropdown menu use 100% width using Bootstrap 4

html

css

bootstrap-4

angular9