Bootstrap水平下拉菜单右对齐

时间:2014-07-03 07:23:39

标签: html css twitter-bootstrap

我将水平下拉菜单对齐row容器的右侧时出现问题。这是因为我的css中有position:fixed,但这只是设置此类菜单的方式。

这是我的css:

.top-main .dropdown-menu {
  width: 100%;
  position: fixed;
  top: 87px;
  z-index: 1000;
  text-align: right;
  padding: 5px 0;
  margin: 0 auto;
}

您可以在此处看到整个菜单:http://www.bootply.com/mNP0ficFef

如您所见,菜单与显示器的右侧对齐,但它应与row的右侧对齐。有什么建议吗?

2 个答案:

答案 0 :(得分:1)

如果我理解您的要求,您只需在下拉列表中设置一个容器:

<ul class="dropdown-menu">
  <ul class="list-inline container">
    <li><a href="#" id="">Link 1.1</a></li>
    <li><a href="#" id="">Link 1.2</a></li>
    <li><a href="#" id="">Link 1.3</a></li>
    <li><a href="#" id="">Link 1.5</a></li>
  </ul>
</ul>

实施例: http://www.bootply.com/Pu3P6c2nlO

答案 1 :(得分:0)

使用内置的pull-right课程:

<nav class="navbar navbar-default navbar-static-top pull-right" role="navigation">
   /* content */
</nav>

Example