Question

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

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

Bootstrap 4中网格右侧的锚元素

1 个答案: