如何在 Bootstrap 中将按钮与文本框右对齐？

什么是 Bootstrap？

在 Web 开发中，Bootstrap 是最流行的 CSS 框架之一。它用于设计和创建具有出色设计和完全响应式的网站。它用于前端开发，可以非常容易地创建网页，而无需太多的 HTML 和 CSS。它几乎与所有浏览器兼容。Bootstrap-5 是最新的可用版本。它有一个容器类，这是整个代码中最重要的部分。

它有很多类可以直接在 class 中使用，它们的定义已经在 Bootstrap 的文档中定义。

将按钮与文本框右对齐

对于任何部分，如果我们想要对齐其位置，我们可以使用 float 类。我们使用 float-end 类将按钮与右侧对齐。如果我们要将其与左侧对齐，我们可以使用 float-start 类。

我们将看到 HTML 代码以了解 float-end 类

示例 1

输出

说明

在上面的 HTML 代码中，我们使用 Bootstrap 设计了一个普通的网页，该网页有两个输入字段和一个提交按钮。在 body 部分，我们使用了 container 类，其中包含所有代码。我们使用了 <form> 标签来设计上面的表单，其中第一个输入字段的类型为文本，另一个输入字段的类型为数字。然后，我们使用了一些类名称来直接通过 Bootstrap 设计一个按钮。在此按钮标签中，我们提到了类名 float-end，它将使其与右侧对齐。

注意：对于 Bootstrap-3 和 Bootstrap-4，我们可以使用 text-right 类来对齐任何元素与右侧。但是 text-right 在 Bootstrap-5 中不起作用。

示例 2

输出

说明

在上面的代码中，我们使用了相同的代码，但是在按钮标签中，我们使用了 text-right 类而不是 float-right 类。在 Bootstrap-2 或 Bootstrap-3 中，text-right 类用于将任何元素与右侧对齐。但是在 Bootstrap-5 中，该类被 float-right 类替换，以与右侧对齐。因此，我们在 Bootstrap-5 中尝试了上面的代码。它不起作用，并且默认情况下，该按钮与文本框的左侧对齐。

注意：在 Bootstrap 的早期版本中，我们可以使用 pull-left 或 pull-right 类来对齐元素。pull-left 类用于与左侧对齐，pull-right 类用于与右侧对齐。在 Bootstrap-5 中，我们可以使用 float-none 来删除元素的 float 选项。