0
私はこの問題を長時間にわたって苦労してきました。正直なところ、私は本当に解決策を見つけることができません。私はブートストラップ4の通知ドロップダウンをしようとしています。私は多くの異なることを試しましたが、どれも働いていませんでした。ブートストラップ4ドロップダウンテキストはdiv内に収まらない
しかし、私の問題は、テキストと日付である：ドロップダウンは、このような何かを見てする必要があります。彼らはただ彼らは、このような全体のドロップダウンの外に行く、div要素に収まらない：
私は改行を試みたが、それは動作しません。何らかの理由で、私はスニペットで働くためにブートストラップを手に入れることができません。
.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>