html - Bootstrap 4 下拉文本不会留在 div 内

Question

我已经为这个问题苦苦挣扎了太多个小时，老实说，我感到非常绝望，但我就是找不到解决方案。我正在尝试在 bootstrap 4 中制作通知下拉菜单。我尝试了很多不同的方法，但都没有用。下拉菜单需要看起来像这样:

但我的问题是文本和日期。它们只是不适合 div，它们会像这样超出整个下拉列表:

我试过换行，但没用。出于某种原因，我无法让 bootstrap 在代码段中工作，对此深表歉意。

.heading {
    color: #747F8B;
    font-size: 14px;
}

.highlight {
    font-weight: bold;
}

.dropdown-item-style {
    background-color: #e9eff2;
    padding: 15px;
}

.dropdown-item-style:hover {
    background-color: lightgrey;
    color: #ffffff;
}

.triangle {
    position: absolute;
    top: -8px;
    left: 134px;
    height: 15px;
    width: 15px;
    border-radius: 6px 0px 0px 0px;
    transform: rotate(45deg);
    background: #FFF;
}

.dropdown-title {
    color: #747f8b;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    padding-left: 15px;
    padding-right: 15px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<li class="nav-item dropdown icondropdown " id="notification-dropdown">
  <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="noti-navbar-badge">3</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1" aria-labelledby="navbarDropdown" style="width: 300px; padding-bottom: 0; top: 70px; border: none; padding-top: 5px;">

    <span class="triangle"></span>
    <a class="dropdown-item dropdown-title">
      <span class="heading">Notificatie's</span><span class="float-right" style="font-size: 14px;">Instellingen</span>
    </a>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>

    <div class="dropdown-item dropdown-item-style" href="#">
      <div class="row">
        <div class="col-md-2">
          <img src="img/johan.jpg" class="rounded-circle" width="32">
        </div>
        <div class="col-md-10">
          <a href="">
            <span class="highlight" style="line-break: auto">Bill gates</span> heeft je bericht geliked.
          </a>
          <small class="text-muted">5 Dagen geleden</small>

        </div>
      </div>

    </div>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
  </div>
</li>

Answer 1

问题是 .dropdown 元素有 .white-space: nowrap;这将防止将单词换行。我会将通知放在一个范围内并为其设置 white-space: normal 。像这样(我添加了一个新类“更多信息”)。并删除 flex-wrap: nowrap;来自包含通知的行，因为您希望文本靠近图像:

.heading {
    color: #747F8B;
    font-size: 14px;
}

.highlight {
    font-weight: bold;
}

.dropdown-item-style {
    background-color: #e9eff2;
    padding: 15px;
}

.dropdown-item-style:hover {
    background-color: lightgrey;
    color: #ffffff;
}

.triangle {
    position: absolute;
    top: -8px;
    left: 134px;
    height: 15px;
    width: 15px;
    border-radius: 6px 0px 0px 0px;
    transform: rotate(45deg);
    background: #FFF;
}

.dropdown-title {
    color: #747f8b;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    padding-left: 15px;
    padding-right: 15px;
}
.dropdown-item .more-info {
    white-space: normal;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

<li class="nav-item dropdown icondropdown " id="notification-dropdown">
  <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa fa-bell-o navbar-icons" aria-hidden="true"></i><span class="noti-navbar-badge">3</span>
  </a>
  <div class="dropdown-menu dropdown-menu-center z-depth-1" aria-labelledby="navbarDropdown" style="width: 300px; padding-bottom: 0; top: 70px; border: none; padding-top: 5px;">

    <span class="triangle"></span>
    <a class="dropdown-item dropdown-title">
      <span class="heading">Notificatie's</span><span class="float-right" style="font-size: 14px;">Instellingen</span>
    </a>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>

    <div class="dropdown-item dropdown-item-style" href="#">
      <div class="row">
        <div class="col-md-2">
          <img src="img/johan.jpg" class="rounded-circle" width="32">
        </div>
        <div class="col-md-10">
          <a href="">
            <span class="highlight" style="line-break: auto">Bill gates</span> <span class="more-info">heeft je bericht geliked.</span>
          </a>
          <small class="text-muted">5 Dagen geleden</small>

        </div>
      </div>

    </div>

    <div class="dropdown-divider m-0" style="border-color: lightgrey"></div>
  </div>
</li>