如何使用 Bootstrap 4 将两个输入框并排放置？(1)

📌 相关文章

📜 如何使用 Bootstrap 4 将两个输入框并排放置？(1)

📅 最后修改于: 2023-12-03 14:51:50.689000 🧑 作者: Mango

如何使用 Bootstrap 4 将两个输入框并排放置？

Bootstrap 4 是一个非常流行的前端框架，它包含了各种组件和样式，可以快速构建漂亮的网站和应用程序。在本文中，我们将介绍如何使用 Bootstrap 4 将两个输入框并排放置。

步骤

创建一个基本的 HTML 文件，并导入 Bootstrap 4 的 CSS 和 JavaScript 文件。你可以使用 Bootstrap 的官方 CDN 或下载并本地引入这些文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootstrap 4 示例</title>

    <!-- 导入 Bootstrap 4 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- 导入 jQuery 和 Popper.js 的 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>

    <!-- 导入 Bootstrap 4 的 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  </head>
  <body>
    <!-- 这里添加你的 HTML 内容 -->
  </body>
</html>

在 <body> 标签内添加一个 <div> 容器，并设置其样式为 form-row。form-row 可以使其内部的表单元素水平排列。

<div class="form-row">
  <!-- 这里添加你的表单元素 -->
</div>

在这个 <div> 容器内添加两个 <div> 容器，并各自设置其样式为 col。col 是一个网格系统类，可以将其内部的内容变为一行的列。

<div class="form-row">
  <div class="col">
    <!-- 这里添加第一个表单元素 -->
  </div>
  <div class="col">
    <!-- 这里添加第二个表单元素 -->
  </div>
</div>

在这两个 <div> 容器内添加你的表单元素。例如，你可以添加两个 <input> 输入框：

<div class="form-row">
  <div class="col">
    <input type="text" class="form-control" placeholder="第一个输入框">
  </div>
  <div class="col">
    <input type="text" class="form-control" placeholder="第二个输入框">
  </div>
</div>

最后，你可以自定义你的输入框样式，例如将其宽度限制为一定的百分比。你可以在 <style> 标签内添加自定义样式：

<style>
  .form-row .col input {
    width: 45%;
  }
</style>

这样就完成了两个输入框并排放置的操作了。

结论

在本文中，我们介绍了如何使用 Bootstrap 4 将两个输入框并排放置。具体来说，我们创建了一个 form-row 容器，并在其内部添加了两个 col 容器。最后，我们在这两个容器内添加了需要并排放置的表单元素。通过像这样简单的步骤，你可以快速地构建出响应式的表单布局。