如何增加twitter bootstrap下拉菜单的宽度?

时间:2013-03-12 17:42:02

标签: html css twitter-bootstrap

如何增加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>

1 个答案:

答案 0 :(得分:1)

查看您提供的代码,我使用Twitter BootStrap的默认设置创建了一个测试页面,并添加了您的文本&#34;酒精事件和状态报告&#34;进入下拉菜单。我发现下拉菜单自动扩展,包括文本的整个宽度。

这意味着您要么为了正常工作而留下了一些必要的代码,要么覆盖了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 /如果你想查找它。