Bootstrap 4下拉文本不会留在div中

Question

我一直在努力解决这个问题太多时间而且我老实说非常绝望，但我找不到解决方案。我正在尝试在bootstrap 4中发出通知下拉列表。我尝试过很多不同的东西，但都没有。下拉列表需要看起来像这样：

但我的问题在于文字和日期。他们只是不适合div，他们就像这样走出整个下拉：

我尝试过linebreak但这不起作用。出于某种原因，我无法在代码段中使用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;这样可以防止将单词分解为新行。我将通知放在一个范围内并设置白色空间：正常。那样的（我添加了一个新课程＆＃39; more-info＆＃39;）。并移除flex-wrap：nowrap;从包含通知的行开始，因为您希望文本靠近图像：

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加

.yourclassname{
       overflow:hidden;
       white-space:noraml;
}

在'。dropdown-item'容器

中的'.col-md-10'类旁边