css - 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>

fiddle : https://jsfiddle.net/qockpgt7/7/