Question

我一直遇到一些问题，即将下拉列表设置为水平（并且列的宽度为100％）。我已经尝试了很多代码，当然还调整了很多东西，但还没有完成。

请注意以下事项：

使用Bootstrap V3.3.7
确保使用nav-tabs（非常规导航栏）
它应该只是列宽度的100％

我希望有人能够帮助我解决这个问题。

此致 Siranix

编辑：根据要求，这是一个bootply try / my code：Bootply

Answer 1

我认为你需要删除position: static;，请让我知道你想要的是什么。

.nav > li.dropdown.open {
}
.nav > li.dropdown.open .dropdown-menu {
    display:table; 
  width: 100%; 
  text-align: center; 
  left:0; 
  right:0;
}
.dropdown-menu>li {
    display: table-cell;
}

<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs">
    <li class="active"><a href="#tab-1" role="tab" data-toggle="tab">General </a></li>
    <li class="dropdown"><a data-toggle="dropdown" aria-expanded="true" href="#" class="dropdown-toggle"><i class="fa fa-users"></i> Example Dropdown<span class="caret"></span></a>
        <ul role="menu" class="dropdown-menu suf-ver-tabdropdown">
            <li role="presentation"><a href="#">First Item</a></li>
            <li role="presentation"><a href="#">Second Item</a></li>
            <li role="presentation"><a href="#">Third Item</a></li>
        </ul>
    </li>
    <li><a href="#tab-2" role="tab" data-toggle="tab">Second Tab</a></li>
    <li><a href="#tab-3" role="tab" data-toggle="tab">Third Tab</a></li>
</ul>

水平导航选项卡下拉列表

1 个答案: