html - 如何增加 twitter bootstrap 下拉菜单的宽度？

Question

如何增加 Twitter Bootstrap 下拉菜单的宽度。我需要列表将酒精事件和状态报告作为一个选项，但默认宽度不够大，无法包含那么多文本。

 <li class="dropdown subnavbar-open-right">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span>Reports/Statistics</span><b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-submenu"><a>USN</a>
                            <ul class="dropdown-menu">
                                <li><a>Alcohol Incidents and Status Reports</a></li>

                            </ul>

Answer 1

查看您提供的代码，我使用 Twitter BootStrap 的默认设置制作了一个测试页面，并将您的文本“Alcohol Incidents and Status Reports”添加到下拉菜单中。我发现下拉菜单自动展开以包含文本的整个宽度。

这意味着要么您遗漏了一些使其正常工作所必需的代码，要么您覆盖了 CSS 类导致它无法工作。这是代码:

    <div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container">
      <a class="brand" href="#">Name</a>
      <div class="nav-collapse collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Alcohol Incidents and Status Reports</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>
          </li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

如果这对您没有帮助，那么您可能需要提供更多代码，以便人们可以帮助您进行调试。我有一个指向 JSFiddle 的链接，但现在似乎不允许我们发布这些链接。如果你想查找它，这里是它的扩展名/tS95X/1/。