为什么 bootstrap float-right class 对我的按钮不起作用？

Question

bootstrap float-right class 不适用于我的按钮。

这是我的 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 class 时它不起作用。

任何人都可以告诉我我的代码有什么问题以及我该如何解决这个问题......

Answer 1

除了浮动，可能还有更好的 Bootstrap 选项。

尝试删除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 的父目录中，或者其他东西正在重写您的样式。

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

Answer 3

正如之前的回答所述，父 div 或元素中可能还有其他一些 styles 与float类不兼容。

尝试在父 div 中添加clearfix Bootstrap class，这应该可以解决您的代码中的问题。