bootstrap navbar list dropdown扩展得太宽了

时间：2016-04-28 13:16:35

标签： html css twitter-bootstrap

我有一个带有＆＃39;响铃的导航栏下拉菜单。希望显示一些通知的图标。 例如，当我向任何列表项添加更多文本行时，句子水平延伸并且不会在新行上中断，因此下拉框只会保持超出宽度。

我已添加此图片以显示我的意思： enter image description here

如何阻止这种情况？我不想给它一个固定的宽度，因为列表项只是从下拉框中释放出来并继续扩展。

这是我的代码：

＆＃13;
＆＃13; 
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;
   }
 }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：3)

如果您不想提供固定宽度，则可以使用max-width。 它不会设置任何固定宽度，但是当文本超出给定max-width时，它将自动分解为新行。

答案 1 :(得分：1)

这很有效。你必须将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>

答案 2 :(得分：0)

你应该使用（最大宽度）你的div。

答案 3 :(得分：0)

属性white-space: normal有助于在必要时将字词换行换行，但如果您的字词过长，则属性word-break: break-word会帮助您在新行上分词

.dropdown-menu.bell li a {

  ...

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

JSFiddle-example

答案 4 :(得分：0)

在stackoverflow社区的帮助下，我终于得到了解决方案！

我在.dropdown-menu.bell＆gt;上添加了以下内容： li>一个：

     white-space: normal;
     width: 350px;
相关问题
最新问题