下拉菜单未正确定位

时间:2018-04-02 16:44:41

标签: html css twitter-bootstrap

我尝试使用bootstrap将下拉菜单添加到导航栏。菜单显示在按钮顶部,并且不显示一个项目。

这是我的html + css的完整jsfiddle:jsfiddle

以下是我用来创建下拉列表的代码:

<div class="dropdown">
        <div class="animMenu dropdown-toggle" id="imgMenu" data-toggle="dropdown">
            <div class="menuBar1"></div>
            <div class="menuBar2"></div>
            <div class="menuBar3"></div>
        </div>
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#">Backup Assistant</a></li>
            <li><a href="#">Settings</a></li>
        </ul>
</div>

您可以通过单击带有3个小节的图标来访问菜单。

animMenu div由3个小节组成,当点击动画时它变为十字形,它不像其他图标那样是常规图像。

有关如何将菜单放在按钮下方的任何想法。我尝试将btn添加到切换类中,但这似乎没有什么区别。

2 个答案:

答案 0 :(得分:1)

**Remove overflow hidden** 
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: calc(100% - 203px);
    float: right;
    display: inline-block;
    margin-top: 5px;
    height: 50px;
}
**And write in place of it** 
div.tab {
     overflow: inherit;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    width: calc(100% - 203px);
    float: right;
    display: inline-block;
    margin-top: 5px;
    height: 50px;
}

之后你的代码工作正常

答案 1 :(得分:0)

将其添加到css

    install.packages('strucchange')
    library(strucchange)
    setwd('C\\...')
    #Import dataset
    HPD_NDVI_Mean <- read.csv('NDVI_Mean_100_yearly.csv')
    for (i in 2: length(HPD_NDVI_Mean)){
      NDVI_Mean = HPD_NDVI_Mean[i]
      NDVI_Mean_ts <- ts(NDVI_Mean, frequency = 1, start = 1988, end = 2017)
      Mean_bp = breakpoints(NDVI_Mean_ts~1)
      year = breakdates(Mean_bp)
      write.csv(year, file = 'Mean_bd.csv')
     }

这将覆盖bootstrap css类下拉菜单类或 你可以使用指定的

 .dropdown-menu {
  top: 50px;
 }

或将新指定的类添加到制表符类