Css 自举'；s下拉列表显示在表格下方

我试图在点击一个按钮后打开一个表内的引导下拉列表。但无论按下哪个按钮，下拉列表都会显示在桌子下面，始终处于相同的位置

有人也有同样的问题吗？我缺少的是什么css职位吗

我的目标是：每个下拉列表必须显示在按下的按钮的正下方

下面是一个演示：

var-app=angular.module（'plunker'，[]）；
应用程序控制器（'MainCtrl'，函数（$scope）{
$scope.filteredList=[]；
$scope.servers=[
{
名称：“服务器1”，
港口：5014
},
{
名称：“服务器2”，
港口：5015
},
{
名称：“服务器3”，
港口：5016
},
{
名称：“服务器4”，
港口：5017
},
{
名称：“服务器5”，
港口：5018
},
{
名称：“服务器6”，
港口：5019
},
{
名称：“服务器7”，
端口：5020
},
{
名称：“服务器8”，
端口：8081
},
{
名称：“服务器9”，
端口：8082
},
{
名称：“服务器10”，
港口：8083
}
];
$scope.orderByField=“name”；
$scope.orderByReverse=false；
$scope.currentPage=1；
$scope.itemsPerPage=5；
$scope.orderBy=函数（字段）{
如果（字段==$scope.orderByField）
$scope.orderByReverse=！$scope.orderByReverse
否则{
$scope.orderByField=字段；
$scope.orderByReverse=false；
}
};
})
.factory（'Utils'，函数（$timeout，$window）{
返回{
getNormalizedString:getNormalizedString，
设置焦点：设置焦点
}
函数getNormalizedString（str）{
str=str.toLowerCase（）；
str=str.replace（新的RegExp（“\\s”，“g”），”）；
str=str.replace（新的RegExp（“[aá–aå]”，'g'），'a”）；
str=str.replace（新的RegExp（“æ”，“g”），“ae”）；
str=str.replace（新的RegExp（“ç”，g'），“c”）；
str=str.replace（新的RegExp（“[èèë]”，'g'），'e”）；
str=str.replace（新的RegExp（“[ìíî]”，'g'），'i”）；
str=str.replace（新的RegExp（“ñ”，g'），“n”）；
str=str.replace（新的RegExp（“[g”），“g”），“o”）；
str=str.replace（新的RegExp（“œ”，“g”），“oe”）；
str=str.replace（新的RegExp（“[g”），“g”），“u”）；
str=str.replace（新的RegExp（“[ýÿ]”，'g'），'y”）；
str=str.replace（新的RegExp（“\\W”，“g”），”）；
返回str；
}
函数setFocus（id）{
$timeout（函数（）{
var元素=$window.document.getElementById（id）；
if（元素）
元素focus（）；
});
}
})
.filter（'normalizedOrderBy'，函数（Utils，$filter）{
返回函数（列表、orderByField、orderByReverse）{
功能正常化（项目）{
var值=项目[orderByField]；
如果（值的类型==“字符串”）
value=Utils.getNormalizedString（值）；
//强制将空名称结束。
如果（值===null | |值===“”）
返回“~”；
返回值；
};
返回$filter（'orderBy'）（list、normalize、orderByReverse）；
}
})
.filter（'normalizedFilter'，函数（Utils，$filter）{
返回函数（列表、搜索）{
功能比较器（实际、预期）{
//Filtro vazio ou nulo。
如果（预期==“”| |预期==null）
返回true；
//伊瓜伊斯学院。
如果（实际==预期）
返回true；
如果（实际类型==“字符串”和预期类型==“字符串”）{
实际值=Utils.getNormalizedString（实际值）；
expected=Utils.getNormalizedString（预期）；
返回实际.indexOf（预期）>-1；
}
返回false；
};
返回$filter（'filter'）（列表、搜索、比较）；
}
});
.corpo{
左边距：自动；
右边距：自动；
填充物：5px；
宽度：95%；
}
.corpo.filteros{页边距顶部：50px；}
.corpo.区域网格{填充：30px 0px；背景色：#ededee；}
.corpo.area grid.container{左边距：5px；右边距：10px；宽度：100%；}
.corpo.area grid.container表{边框折叠：单独；边框间距：0 0px；边距顶部：-10px；}
.corpo.grid.grid标题th{color:#999；光标：指针；字体系列：“RobotoLight”，RobotoLight，无衬线；填充：2px 12px；文本对齐：左；文本装饰：无；}
.corpo.grid.linhas-grid.linha-par{背景色：#f8f8；}
.corpo.grid.linhas grid td{border:1px solid#edededee；边框样式：solid solid；颜色：#333；字体大小：0.88em；线条高度：0.8；填充：2px 12px；}
.corpo.grid.linhas grid td+td{左边框：2px#ddd；}
.corpo.grid.linhas grid td img{高度：35px；宽度：35px；}
.corpo.grid.linhas grid td:first child{边框左侧样式：实心；边框左上半径：10px；边框左下半径：10px；}
.corpo.grid.linhas grid td:last child{背景色：#edededee；}
.corpo.grid.linhas grid.icone grid{背景色：1px 1px 1px#c9c8c9；}
.corpo.grid.linhas grid.icone grid i{color:#999；}
.corpo.grid.checkbox{高度：17px；宽度：17px；边距：1px；}
.container.largura100{宽度：98%；}
.container.largura80{宽度：78%；}
.container.largura60{宽度：58%；}
.container.largura40{宽度：38%；}
.container.largura35{宽度：33%；}
.container.largura30{宽度：28%；}
.container.largura20{宽度：18%；}
.container.largura15{宽度：13%；}
.container.largura10{宽度：8%；}
.container.largura5{宽度：3%；}
.包含
<td class="dropdown">
  <button class="btn btn-default dropdown-togle icone-grid" data-toggle="dropdown">
    <i class="fa fa-gears"></i>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li>
      <a class="dropdown-item" href="#">Atualizar</a>
    </li>
      ...