2
我有一個navbar下拉菜單，'bell'圖標有望顯示一些通知。 例如，我爲任何列表項目添加更多文本行，該句子水平延伸並且不會在新行上中斷，因此下拉框的寬度始終超出。bootstrap導航欄列表下拉菜單延伸得太寬
我加入此圖片說明我的意思： 
如何停止？我不想給它一個固定的寬度，因爲列表項只是從下拉框中釋放出來並繼續擴展。
這裏是我的代碼：
body {
padding-top: 102px;
background-color: #4d4d4d;
font-family: 'Lato', verdana, sans-serif;
}
.container {
width: 1530px;
margin-top: 0;
}
.navbar-fixed-top {
background-color: #fff;
}
.navbar-header {
min-height: 80px;
}
.hamburger-icon {
margin-top: 20px;
}
.navbar-default .navbar-brand {
line-height: 45px;
font-size: 45px;
color: #010101;
text-transform: uppercase;
}
.navbar-default .navbar-brand span {
font-style: normal;
color: #ff5500;
}
.search .input-group {
padding-top: 15px;
font-family: 'Lato', sans-serif;
}
.search .input-group input.search-field {
border-radius: 0;
border: 0;
box-shadow: none;
background-color: #fff;
font-size: 18px;
font-weight: 100;
}
.search .input-group input.search-field:hover {
background-color: transparent;
}
.search .input-group-btn button {
padding: 2px;
border: 0;
box-shadow: none;
background-color: transparent;
border-radius: 0;
}
.search .input-group-btn button:hover {
background-color: #f8f8f8;
color: #ff5500;
}
.search .input-group-btn .glyphicon-search {
font-size: 22px;
}
.dropdown-toggle.inbox {
padding-top: 15px;
margin-bottom: 5px;
}
.dropdown-menu li {
width: 400px;
}
.dropdown-menu.bell {
background-color: #f8f8f8;
border-radius: 0;
box-shadow: 0;
}
.dropdown-menu.bell h4 {
padding: 10px 0;
color: #010101;
text-align: center;
display: block;
}
.dropdown-menu.bell li a {
padding-top: 5px;
padding-bottom: 5px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
.dropdown-menu.bell li.divider {
padding: 0;
margin: 0 20px;
}
.dropdown-menu.bell .label {
background-color: transparent;
color: #ff5500;
font-weight: 100;
}
.badge-notify {
background: #ff5500;
margin-top: -24px;
margin-left: -20px;
height: 1.7em;
}
/* caret for notification dropdown */
.dropdown-menu.bell:before {
position: absolute;
top: -10px;
right: 10%;
display: inline-block;
border-right: 10px solid transparent;
border-bottom: 10px solid #ccc;
border-left: 10px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.dropdown-menu.bell:after {
position: absolute;
top: -9px;
right: 10%;
display: inline-block;
border-right: 9px solid transparent;
border-bottom: 9px solid #f8f8f8;
border-left: 9px solid transparent;
content: '';
}
.user span.fullname {
font-size: 14px;
color: #010101;
font-weight: 400;
}
.user span:last-child {
padding-right: 10px;
}
.user span:first-child {
padding-right: 30px;
padding-left: 10px;
}
.user .dropdown-menu.user-list {
width: 100%;
border-radius: 0;
border: 0;
background-color: #f8f8f8
}
.user .dropdown-menu.user-list li a {
margin: 5px 0px;
color: #010101;
}
.user .dropdown-menu.user-list li a:hover {
background-color: transparent;
color: #ff5500;
}
.user .dropdown-menu.user-list li.divider {
padding: 0;
margin: 0 20px;
}
/* Large desktop */
@media (max-width: 1590px) {
.container {
width: auto;
}
}
/* Portrait tablet to landscape and desktop */
@media (max-width: 979px) {}
/* Landscape phone to portrait tablet */
@media (max-width: 768px) {
.container {
width: auto;
}
.navbar-default .navbar-brand {
font-size: 40px;
}
.dropdown.bell .inbox {
width: 100% !important;
}
.dropdown-menu.bell h4 {
margin: 0 0;
}
.dropdown-menu.bell:before,
.dropdown-menu.bell:after {
display: none;
}
.bell,
.user {
text-align: center;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
.navbar-default .navbar-brand {
font-size: 30px;
}
}<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<div class="navbar navbar-default navbar-fixed-top navbar-md" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger-icon" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">BRAND<span>LOGO</span></a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<!-- search bar -->
<li class="dropdown search">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control search-field" placeholder="Search name or keyword" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-128.png" height="30" width="30" class=" avatar-img img-square">
</button>
</div>
</div>
</form>
</li>
<!-- notification bell -->
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-bell-outline-128.png" height="45" width="45" class=" avatar-img img-square">
<span class="badge badge-notify">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li>
<h4 class="menu-title">Notifications</h4>
</li>
<li><a href="#"><span class="label label-default">4:00 AM</span>Favourites Snippet</a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">4:30 AM</span>Email marketing</a>
</li>
<li class="divider"></li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email blaaaa
\t \t \t \t \t \t blaaaddddddddddddddddddddddddddddddddddddddddddddddddblaaadddddddddddddddddddddddddddddddddddddddddddddddd
design</a>
</li>
<li class="divider"></li>
<li><a href="#" class="text-center">View All</a>
</li>
</ul>
</li>
<!-- user login information -->
<li class="dropdown user">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span><img src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-128.png" height="50" width="50" ></span>
<span class="fullname">Jacky Smith</span>
<span><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-08-128.png" height="20" width="20" ></span>
</a>
<ul class="dropdown-menu user-list" role="menu">
<li><a href="#">Action</a>
</li>
<li class="divider"></li>
<li><a href="#">Another action</a>
</li>
<li class="divider"></li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
<li class="divider"></li>
<li><a href="#">One more separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
\t \t \t <a href="#"></a>
\t \t \t </div>
\t \t \t <div style="height: 1em;">
\t \t \t </div> -->
</div>
</div>
</div>
</div>
@Leo我沒有通知功能尚未獅子，我只是說這是我想它... – Krys