Question

我想将我的bootstrap垂直下拉菜单显示为水平视图。这意味着dropdwon列表项应该显示在同一行。

当前下拉菜单项显示在具有垂直视图的下拉列表中。但是当用户点击按钮时，我需要相同的水平线视图。

这是我的代码

form_row

Answer 1

从内联块css我们使用span而不是列出项目（li）

errno

Answer 2

您可以使用解决方案https://jsfiddle.net/1s75buv9/5/

＆＃13;

var pos = parseInt($('.linedUp').closest('.dropdown').position().left);
calcWidth = function(){
	setTimeout(function(){
  	var width = 0;
    var maxWidth = $(document).width() - pos;
  	$('.linedUp li').each(function(){
      width += parseInt($(this).outerWidth()) + 2;
      if( maxWidth < width){
      	width -= parseInt($(this).outerWidth());
      }
      
    });
    $('.linedUp').css({
    	width: width
    });
  }, 0);
  	
}

＆＃13;

.linedUp > li{
  display: inline;
  float: left;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default  navbar-inverse" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
      </button> <a class="navbar-brand" href="#">Brand</a>
  </div>

  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
          <li class="active">
              <a href="#">Link</a>
          </li>
          <li>
              <a href="#">Link</a>
          </li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" onclick="calcWidth()">Dropdown<strong class="caret"></strong></a>
              <ul class="dropdown-menu linedUp">
                  <li>
                      <a href="#">Action</a>
                  </li>
                  <li>
                      <a href="#">Action 2</a>
                  </li>
                  <li>
                      <a href="#">Something else here</a>
                  </li>
                  <li>
                      <a href="#">Separated link</a>
                  </li>
                  <li>
                      <a href="#">One more separated link</a>
                  </li>
              </ul>
          </li>
      </ul>
  </div>

</nav>

＆＃13;

我使用 li 创建，然后动态计算宽度。

如何在Bootrap导航栏中显示水平子菜单？

2 个答案: