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
bootstrap 4 pull-xs-right not working as expected
提问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-right
then 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-left
and .pull-right
.
在 Bootstrap 中.float-{sm,md,lg,xl}-{left,right,none}
,为响应式浮动添加了4 个类,并替换了.pull-left
和.pull-right
.
That means:
这意味着:
.pull-right
was replaced by .float-right
.pull-right
被替换了 .float-right
.pull-left
was replaced by .float-left
.pull-left
被替换了 .float-left
.pull-xs-right
is wrong, replace .pull
by .float
the xs
between 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
通过.float
的xs
拉动,右支架额外的小这就决定了元素的大小之间。以下是更改元素大小的选项:{xs,sm,md,lg,xl}
其中xs
= 特小、sm
= 小、md
= 中、lg
= 大和xl
= 特大
回答by Joshua Torres
As mentioned above float replaces pull. So .float-right
replaces .pull-right
and .float-left
replaces .pull-right
. You can add -{sm,md,lg,xl}
for different breakpoints for example .float-md-right
will 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
将在中型屏幕上中断。如果您不使用尺寸,则它不会破裂,并且始终会沿指示的方向浮动。