bootstrap 4 pull-xs-right 没有按预期工作答案

【问题标题】：bootstrap 4 pull-xs-right not working as expectedbootstrap 4 pull-xs-right 没有按预期工作
【发布时间】：2017-01-25 07:53:46
【问题描述】：

我有这个 html 使用 bootstrap 4 utilities 将按钮拉到屏幕右侧。它确实做到了这一点。

但是，按钮不会按预期将其下方的内容向下推。它们最终覆盖在下面的内容之上。

如果我不使用pull-xs-right，那么按钮会左对齐，但它们会推动下面的项目。

我还需要申请其他课程吗？

       <div class="pull-xs-right">
            <button click.delegate="saveEdit()"
                    type="submit"
                    class="k-button k-primary">
                Save
            </button>
            <button click.delegate="cancel()"
                    class="k-button">
                Cancel
            </button>
        </div>

【问题讨论】：

分享你在 jsfiddle 上的工作。
pull-xs-right 只添加float: right，因此您的 div 将保持 100% 宽度的块

标签： css bootstrap-4

【解决方案1】：

在 Bootstrap 4 中，为响应式浮动添加了 .float-{sm,md,lg,xl}-{left,right,none} 类，并替换了 .pull-left 和 .pull-right。

这意味着：

.pull-right 被 .float-right 替换

.pull-left 被替换为.float-left

.pull-xs-right 是错误的，将.pull 替换为.float 拉和右之间的xs 代表超小，它决定了元素的大小。以下是更改元素大小的选项：{xs,sm,md,lg,xl} 其中xs = 特小，sm = 小，md = 中，lg = 大，xl = 特大

见：https://v4-alpha.getbootstrap.com/migration/

【讨论】：

谢谢！我为此损失了 2 个小时的生命……下次我会尽快寻找迁移文档……
在maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/…中没有float-xs-right而是从sm开始如float-sm-right
抱歉，延迟将此标记为正确答案。我之前不知何故错过了这个。

【解决方案2】：

如上所述，float 取代了 pull。所以.float-right 替换.pull-right 和.float-left 替换.pull-right。您可以为不同的断点添加 -{sm,md,lg,xl}，例如 .float-md-right 将在中型屏幕上中断。如果您不设置尺寸，则它不会破裂，并且始终沿指示的方向浮动。

【讨论】：