Bootstrap拆分按钮在Drupal网站渲染异常，下拉组件错位求助

我无法让Bootstrap拆分按钮正常渲染：该按钮在Codepen和JSFiddle中能正常工作，但在测试用Drupal网站里，下拉组件被推到了按钮下方。我尝试了所有已知的CSS调整方案，甚至采用了ChatGPT给出的建议，均无效，现寻求CSS专家帮助。

测试站点：http://lab.oyhd.com/
访问路径：菜单>基础设施>位置管理

Add Location按钮的下拉组件应位于按钮右侧，我参考的是Bootstrap 3.4的拆分组件示例。

使用的代码如下：

<div class="split">
<div class="btn-group">
  <button type="button" class="btn btn-warning btn-lg">Add Location</button>
  <button type="button" class="btn btn-warning btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="/node/add/location">Location</a></li>
    <li><a href="/node/add/ct-building">Building (Campus)</a></li>
    <li><a href="/node/add/sublocation">SubLocation</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</div>

内容的提问来源于stack exchange，提问作者GuyManDude