Css 将元件固定到引导4中网格的右侧

我在网格中的定位有点问题。我的makrup与下面发布的标记不同，但为了清晰起见，我想我会写一些新的东西。我的问题是屏幕右侧的按钮看起来不错，但当我调整它的大小时，它会移动。在我的个人网站上，如果我调整它的大小，它甚至会移出容器。如何将其锚定到网格的右侧，以便即使在调整窗口大小时，按钮与网格右边缘的距离始终保持不变

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="bg-secondary" style="padding: 40px 40px 60px;">

<div class="tab-content bg-white" >
<div class="row">
              <div class="col-sm-9">
                <h4>Get Started Using Whatever</h4>
                <p><span className="font-weight-bold">Step 1</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p><span className="font-weight-bold">Step 2</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p><span className="font-weight-bold">Step 3</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
              </div>
              <div class="col-sm-3">
                <Button color="primary">Authorize Whatever Account</Button>
              </div>
            </div>
</div>
</div>

开始使用任何东西
第1步：知识与知识的分享，分享精英，分享劳动与财富的暂时性成果。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

第二步：知识与知识的共享，精英的奉献，劳动与财富的暂时性共享。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

第3步：知识与知识共享，奉献精英，为劳动和生活提供临时支持。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡

授权任何账户

---

首先，我不知道这是否是因为这是布局的简化版本，但您需要一个

容器/容器流体类

其次，按钮和网格右边缘的距离是否始终保持不变？你是说你想让按钮一直向右浮动吗？您可以将列的
文本对齐
设置为右侧以实现此目的。如果希望按钮始终位于屏幕右侧，可以使用
位置：固定/绝对

<div class="col-sm-3 text-right">
    <button class="text-primary"> ... </button>
</div>

小提琴：
嘿，谢谢你的回答！当我试图添加一个右边距将其从侧面拉离时，它会落在文本下方的底部。知道为什么会这样吗？
<p><span class="font-weight-bold">Step 1</span> ... </p>
<button class="text-primary"> ... </button>