ブートストラップのnavbarリストのドロップダウンが広すぎる

Question

私はnavbarのドロップダウンに 'bell'アイコンがあり、うまくいくらかの通知が表示されます。 たとえば、すべてのリスト項目にテキスト行を追加すると、文章は水平方向に伸び、改行しないので、ドロップダウンボックスの幅はそのまま維持されます。

私は私が何を意味するかを示すために、この画像を追加しました：

私はこれを阻止する方法を教えてくださいリスト項目はドロップダウンボックスから空きがなくなって拡張されるので、固定幅を与えたくない。ここ

は私のコードです：

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>

Answer 1

あなたが一定の幅を与えたくない場合は、あなたがmax-widthを使用することができます。 固定幅は設定されませんが、テキストが指定されたmax-widthを超えると自動的に改行されます。

Answer 2

divには（最大幅）を使用する必要があります。

Answer 3

これは機能します。 DIVをすべてのコンテンツに貼り付ける必要があり、12個のセルのテキストを占有し、オーバーフローしないようにする必要があります。テキストが空のラベルを行くことができない私はまたスパンを得ているテキストでは、すべてが常に

<li> 
    <div class="col-xs-12"> 
    <a href="#"> 
     <span class="label label-warning">5:00 AM</span> 
     <span>iber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla Subscriber focused email bla</span> 
    </a> 
    </div> 
</li> 

Answer 4

それが必要なプロパティwhite-space: normalは、新しい行に単語をラップするのに役立ちますが、あなたはあまりにも長い単語を持っている場合にラベル付けする必要があります、プロパティword-break: break-wordは私が最終的にstackoverflowのコミュニティからの助けを借りて、私の解決策の作業を得た

.dropdown-menu.bell li a { 

    ... 

    white-space: normal; 
    word-break: break-word; 
} 

JSFiddle-example

Answer 5

あなたが新しい行に単語を分割するのに役立ちます！私は私の.dropdown-menu.bellで次のように含まれ

> LI>：私はまだ機能して通知を持っていけないライオン@Leo

 white-space: normal; 
    width: 350px;