在 Bootstrap 4 中将元素锚定到网格的右侧

Question

我在网格中定位时遇到了一些问题。我的 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>

https://jsfiddle.net/aq9Laaew/166366/

Answer 1

首先，我不知道是不是因为这是你的布局的简化版本，但你需要一个container / container-fluid 类。

其次，按钮与网格右边缘的距离始终保持不变？您的意思是您希望按钮始终向右浮动吗？您可以将列的text-align 设置为正确的来实现这一点。如果您希望按钮始终位于屏幕右侧，可以使用position:fixed / absolute;。

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

最后，我不知道您来自什么语言，但请尝试使用标准的 html 属性，例如 class 而不是 className 等。

<p><span class="font-weight-bold">Step 1</span> ... </p>
<button class="text-primary"> ... </button>

小提琴： https://jsfiddle.net/qockpgt7/7/