Question

在Bootstrap 3中，我想在下拉菜单中添加几个链接：

    <li class="dropdown">
            <a id="alert" data-toggle="dropdown" class="dropdown-toggle"  href="#" title="Notification">Notifications </a>

            <ul id="noti" class="dropdown-menu">
                 {% for t in alerts%}
                   <li> 
                     <a href="/article/{{t.slug}}">{{t.title}}</a>
                   </li>
                 {% endfor %}
            </ul>     
    </li>

问题是每个链接都有不同的宽度，所以我想知道如何定义css来包装菜单中最长的链接？

Answer 1

我已经实现了可以根据您的要求进行更改的代码段。主要部分是CSS更改：

.dropdown-menu {
  max-width: 180px;
}
.dropdown-menu li a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">  
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#" title="HTML">HTML</a></li>
      <li><a href="#" title="CSS">CSS</a></li>
      <li><a href="#" title="HTML CSS JavaScript bootstrap">HTML CSS JavaScript bootstrap</a></li>     
    </ul>
  </div>
</div>

</body>
</html>

Answer 2

尝试在以下链接中定义解决方案：

https://github.com/silviomoreto/bootstrap-select/issues/351

Answer 3

试试这个。

 <li class="dropdown">
        <a id="alert" data-toggle="dropdown" class="dropdown-toggle"  href="#" title="Notification">Notifications </a>

     <div class="dropdown-menu" style="width: auto;">
        <ul id="noti" >
             {% for t in alerts%}
               <li> 
                 <a href="/article/{{t.slug}}">{{t.title}}</a>
               </li>
             {% endfor %}
        </ul>     
     </div>
</li>

我所做的只是放在＆＃39; div＆＃39;标记周围＆＃39; ul＆＃39;。这个对我有用。

如何使bootstrap下拉菜单宽度变得灵活？

3 个答案: