绝对位置时如何在引导程序4中设置mr-0答案

【问题标题】：how to set mr-0 in bootstrap 4 when position absolute绝对位置时如何在引导程序4中设置mr-0
【发布时间】：2020-09-04 02:38:22
【问题描述】：

对于我在引导程序中使用的 toast，我想使用 classmr-0 将 toast 推到右侧。但这不起作用：

<div class="toast hide position-absolute mr-0"  data-autohide="false">
    <div class="toast-header">
         <strong class="mr-auto text-primary">Share Link</strong>         
         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
    </div>
    <div class="toast-body">
    <?php echo $share_link; ?>
    </div>
</div>

当我使用这个时：style="right: 0px;" 它可以工作：

<div class="toast hide position-absolute" style="right: 0px;" data-autohide="false">
...

谁能告诉我为什么mr-0 在这种情况下不起作用？

【问题讨论】：

标签： html css twitter-bootstrap margin

【解决方案1】：

mr-0 是一个margin-right: 0px，它对position: absolute 没有直接影响。您可以在MDN docs 上阅读有关绝对位置的更多信息。

【讨论】：

【解决方案2】：

使用位置relative 来使用边距。 margin-bottom, margin-left,margin-right 在绝对定位下不起作用，

【讨论】：