Bootstrap 4 引导4下拉菜单在网格内未正确定位

我很确定我在这里做错了什么，但是你能告诉我为什么在下面的代码中，部分下拉菜单会出现在屏幕外吗？ 顺便说一句，当滚动（在这种情况下为水平）时，菜单位置将更新到正确的位置

<div class="container-fluid">
  <div class = "row">
    <div class="col-4"></div>
    <div class="col-4"></div>
    <div class="col-4 text-right">
        <div class="dropdown">
            <button class="btn btn-info btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           butt
            </button>
            <div class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item">This is one thing yes it is one thing</a>
              <a class="dropdown-item">This is one thing yes it is one thing</a>
              <a class="dropdown-item">This is one thing yes it is one thing</a>
              <a class="dropdown-item">This is one thing yes it is one thing</a>
              <a class="dropdown-item">This is one thing yes it is one thing</a>
            </div>
       </div>
   </div>

烟蒂

谢谢
将class
下拉菜单添加到
下拉菜单的右侧