Html 如何使引导下拉列表始终与行左对齐

使用Bootstrap3.3.4，我试图创建一个列表（或“网格”），其中包含动态数量的“图像块”，每个图像块在单击时都有一组不同的选项显示

以下是我到目前为止的情况：

（请忽略这些愚蠢的图片）

正如单击每个图像时所看到的，下拉列表显示正确，但与单击的图像对齐。可以让它与行左对齐吗

以下是一些代码，因为我必须：

   <div class="image-container  row" id="myContainer">
 <div class="dropdown">
   <div class="imageTile" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">
      <div id="image-badge" style="position:absolute;margin-left:10px;display:none;" class="buttonCountBadge border border-dark rounded-circle badge badge-light">3</div>
      <img src="https://rfclipart.com/image2/thumbnail/3b-3b-f2/head-with-beard-and-hair-Download-Royalty-free-Vector-File-EPS-359793.jpg" />

  </div>


 <div  class="dropdown-menu image-dropdown-menu">
    <button class="btn gridButton btn-default" type="button">Neck</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Front - Right</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Left</button>
    <button class="btn gridButton btn-default" type="button">Shoulder - Back - Right</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Left</button>
    <button class="btn gridButton btn-default" type="button">Pectoris - Right</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Left</button>
    <button class="btn gridButton btn-default" type="button">Ribs - Right</button>
    <button class="btn gridButton btn-default" type="button">Abdomen</button>
    <button class="btn gridButton btn-default" type="button">Back - Upper</button>
    <button class="btn gridButton btn-default" type="button">Back - Lower</button>
  </div>


</div>

3.
脖子
肩-前-左
肩-前-右
肩-背-左
肩-背-右
左胸
胸肌-右
肋骨-左
肋骨-对
腹部
后上
后下部

添加此样式

.dropdown.open {
    position: static;
}
.dropdown-menu.image-dropdown-menu {
  left: 25px !important;
  width: 98%;
  top: 180px;
}

现在，下拉列表对于主体始终是绝对的，而不是相对的父容器

.image容器{
宽度：100%；
填充：20px；
显示器：flex；
柔性包装：包装；
位置：相对位置；
}
.imageTile{
填充物：5px；
最大宽度：160px；
最大高度：160像素；
光标：指针；
}
.下拉菜单{
显示：无；
文本对齐：居中；
边界半径：0；
边框宽度：0px；
页边顶部：-1px；
最大高度：700px；
}
.图像下拉菜单{
文本对齐：居中；
边界半径：0；
边框宽度：0px；
页边顶部：-1px；
宽度：100vw；
左：0；
最大高度：700px；
溢出：自动；
填充：.5rem；
边缘顶部：5px；
最小高度：160px；
}
.下拉菜单.打开{
显示：flex！重要；
}
.btn{
边缘顶部：10px；
}
.标题{
字体大小：小；
字号：10；
}
.下拉菜单.打开{
位置：静态；
}
.下拉菜单.图像下拉菜单{
左：25px！重要；
宽度：98%；
顶部：180像素；
}

3.
脖子
肩-前-左
肩-前-右
肩-背-左
肩-背-右
左胸
胸肌-右
肋骨-左
肋骨-对
腹部
后上
后下部
轻微疼痛
中度疼痛
极度疼痛
左臀
1.
2.
3.
4.
5.
右臀
1.
2.
3.
4.
5.
腹股沟
1.
2.
3.
4.
5.
臀部-左
1.
2.
3.
4.
5.
臀部-左
1.
2.
3.
4.
5.
轻微疼痛
中度疼痛
极度疼痛
左臀
1.
2.
3.
4.
5.
右臀
1.
2.
3.
4.
5.
腹股沟
1.
2.
3.
4.
5.
臀部-左
1.
2.
3.
4.
5.
臀部-左
1.
2.
3.
4.
5.
轻微疼痛
中度疼痛
极度疼痛
头
以一些长标签为例
眼睛
耳朵
轻微疼痛
中度疼痛
极度疼痛
左臀
1.
2.
3.
4.
5.
右臀
1.
2.
3.
4.
5.
腹股沟
1.
2.
3.
4.
5.
臀部-左
1.
2.
3.
4.
5.
臀部-右
1.
2.
3.
4.
5.
$（文档）.ready（函数（）{
$（'.下拉菜单'）。单击（函数（e）{
e、 停止传播（）；
});
$（'.image container'）.on（'hide.bs.dropdown'，函数（e）{
$（e.relatedTarget）.removeClass（'selected'）.css（“border”，“0px”）；
});
$（“。图像