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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/39542435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 12:08:15  来源:igfitidea点击:

bootstrap 4 pull-xs-right not working as expected

cssbootstrap-4

提问by Greg Gum

I have this html using bootstrap 4 utilitiesto pull the buttons to the right of the screen. And it does do this.

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

However, the buttons do not push down the content below it as expected. They end up overlayed on top of the content below.

但是,按钮不会按预期下推其下方的内容。它们最终叠加在下面的内容之上。

If I do not use pull-xs-rightthen the buttons are left aligned, but they do push the items below.

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

Is there some other class I need to apply?

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

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

回答by Sam Tomashi

In Bootstrap 4 .float-{sm,md,lg,xl}-{left,right,none}classes were added for responsive floats, and replaced .pull-leftand .pull-right.

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

That means:

这意味着:

.pull-rightwas replaced by .float-right

.pull-right被替换了 .float-right

.pull-leftwas replaced by .float-left

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

.pull-xs-rightis wrong, replace .pullby .floatthe xsbetween pull and right stands for extra small which determines the size of the element. The following are the options to change the element size: {xs,sm,md,lg,xl}where xs= extra small, sm= small, md= medium, lg= large and xl= extra large

.pull-xs-right是错误的,取代.pull通过.floatxs拉动,右支架额外的小这就决定了元素的大小之间。以下是更改元素大小的选项:{xs,sm,md,lg,xl}其中xs= 特小、sm= 小、md= 中、lg= 大和xl= 特大

See: https://v4-alpha.getbootstrap.com/migration/

请参阅:https: //v4-alpha.getbootstrap.com/migration/

回答by Joshua Torres

As mentioned above float replaces pull. So .float-rightreplaces .pull-rightand .float-leftreplaces .pull-right. You can add -{sm,md,lg,xl}for different breakpoints for example .float-md-rightwill break on medium-sized screens. If you leave off the size then it will not break and will always float in the direction indicated.

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