如何让下拉菜单对齐？

问题描述：

我使用了自举导航栏和导航栏右侧的下拉菜单，当在大页面上运行时，下拉菜单可以在右侧弹出，但是当我更改窗口大小时，左侧的下拉菜单弹出为什么？如何让它始终在窗口右侧弹出？如何让下拉菜单对齐？

这些CSS代码：

 <style> 
     .navbar-header, .navbar-brand { 
      float: left !important; 
     } 

     .dropdown-toggle { 
      float: right !important; 
     } 

     .navbar-right:last-child { 
      margin-right: 0px !important; 
      padding-top: 8px !important; 
     } 

    </style>

这些HTML代码：

  <nav class="navbar navbar-inverse navbar-fixed-top"> 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <a class="navbar-brand" href="#">Brand</a> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="navbar-right"> 
        <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-label="Left Align"> 
         <i class="glyphicon glyphicon-list" aria-hidden="true"></i> 
        </a> 
        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Action</a></li> 
         <li><a href="#">Another action</a></li> 
         <li><a href="#">Something else here</a></li> 
         <li class="divider"></li> 
         <li><a href="#">Separated link</a></li> 
        </ul> 
       </div> 
      </div> 
      <!-- /.container-fluid --> 
     </nav>

如何让它弹出总是在窗口的右侧？谢谢，谢谢。

你可以做一个小提琴或bootply所以我们可以看到在行动 – 2015-03-25 07:01:33

代码http://jsfiddle.net/taobataoma/2w2ayyg4/ 这里是小提琴演示，您可以在IFRAME窗口的左边看到的弹出式菜单，当你把iframe窗口分割成大的大的时候，弹出式菜单就会在iframe窗口右边，我要它总是在iframe窗口右边弹出 – taobataoma 2015-03-25 09:40:11

答

添加到您的CSS和应该解决的问题：

它在做什么是覆盖left引导设置，并与right: 0

替换它

.open > .dropdown-menu { 
    right:0; 
    left: auto; 
}

谢谢，它的工作正常^ _^ – taobataoma 2015-03-25 10:09:18

我测试它在铬，它是非常好的，在safiri ，弹出菜单的宽度就是窗口的宽度，如何修复？ – taobataoma 2015-03-25 10:21:52

请查看更新的代码并再次检查 - 将'left：unset'更改为'left：auto' - 我没有意识到它没有得到很好的支持 – 2015-03-25 11:37:31

答

将行.dropdown-menu { margin-left: 52.5vw; }添加到您的CSS将强制下拉菜单始终在屏幕的右侧。

答

问题是你正试图跟踪浮标，这很好，但尝试考虑代码中的位置标记并将位置设置为相对。下面是代码：

 <style> 
 
     .navbar-header, .navbar-brand { 
 
      float: left !important; 
 
      position: relative; 
 
     } 
 

 
     .dropdown-toggle { 
 
      float: right !important; 
 
      position: relative; 
 
     } 
 

 
     .navbar-right:last-child { 
 
      margin-right: 0px !important; 
 
      padding-top: 8px !important; 
 
      position: relative; 
 
     } 
 

 
    </style>

试图与位置标签拨弄了一下，你应该把你的结果;）

我用过你的css代码，当我把浏览器窗口改成更小的尺寸时，在窗口左边的弹出式菜单，但我希望它在窗口的右侧，当我将窗口更改为大尺寸时，窗口右侧的弹出式菜单，这一次，这没关系 – taobataoma 2015-03-25 09:29:58

http：// jsfiddle.net/taobataoma/2w2ayyg4/ 这里是小提琴演示，你可以看到iframe窗口左边的弹出式菜单，当你将iframe窗口分成大大的大，弹出菜单右边的iframe窗口，我想它总是弹出右边的iframe窗口 – taobataoma 2015-03-25 09:40:21

如何让下拉菜单对齐？

相关推荐