html - Bootstrap 导航栏列表下拉列表扩展得太宽

Question

我有一个带有“铃铛”图标的导航栏下拉菜单，希望它能显示一些通知。 例如，当我向任何列表项添加更多文本行时，句子水平延伸并且不会换行，因此下拉框一直超出宽度。

我添加了这张图片来说明我的意思:

我该如何阻止它？我不想给它一个固定的宽度，因为列表项刚刚脱离下拉框并继续扩展。

这是我的代码:

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 
						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">
			  <a href="#"></a>
			</div>

			<div style="height: 1em;">
			</div> -->




    </div>
  </div>
</div>

</div>

Answer 1

如果你不想给定一个固定的宽度，那么你可以使用max-width。 它不会设置任何固定宽度，但当文本超过给定的 max-width 时，它会自动分解为一个新行。