为什么引导浮动右类不适用于我的按钮

Question

引导程序float-right类无法使用我的按钮。

这是我的html代码片段：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<button type="button"
id="reset_button"
class="btn btn-outline-secondary btn-lg float-right"
disabled="disabled">Reset</button>

<button type="button"
id="convert_button"
class="btn btn-primary btn-lg float-right" 
disabled="disabled">Submit</button>
</div>

我想让按钮正确对齐，但当我在两个按钮中添加float-right类时，它不起作用。

有人能告诉我我的代码出了什么问题吗？我该如何修复。。。

Answer 1

可能有更好的Bootstrap选项而不是float。

试着删除float-right，改为在代码的顶部使用d-flex和justify-content-end，如下所示。。。。

<div class="container-fluid d-flex justify-content-end">
<button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary btn-lg" 
disabled="disabled">Submit</button>
</div>

Answer 2

代码对我有用。我刚刚复制了你的代码片段，按钮在右边。

问题是在具有不同CSS的父DIR中存在meaby，或者其他东西正在重写您的样式。

当您在这里运行代码片段时，您也可以看到这一点。

Answer 3

如前所述，父div或元素中可能存在与float类不兼容的其他样式。

尝试在父div中添加clearfixBootstrap类，这将解决代码中的问题。