bootstrap 4 pull-xs-right 未按预期工作

Question

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

但是，按钮并没有像预期的那样下推其下方的内容。它们最终覆盖在下面的内容之上。

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

还有其他的class我需要申请吗？

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

Answer 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 pull和right之间的xs代表extra small，它决定了元素的大小。以下是更改元素大小的选项：{xs,sm,md,lg,xl} 其中 xs = 特小，sm = 小，md = 中，lg = 大和xl = 特大

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

Answer 2

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

bootstrap 4 pull-xs-right 未按预期工作

bootstrap 4 pull-xs-right not working as expected

css

bootstrap-4