CSS Bootstrap 4：在 jumbotron 中居中内联表单

在本文中，我们将介绍如何使用 CSS 和 Bootstrap 4 在 jumbotron 中居中内联表单。Jumbotron 是 Bootstrap 4 中的一个组件，用于展示大型的页面头部内容。

阅读更多：CSS 教程

在 jumbotron 中创建内联表单

要在 jumbotron 中创建内联表单，我们首先需要在 HTML 中添加一个 jumbotron 元素，然后在该元素内部添加一个 form 元素。在创建 form 元素时，我们需要使用 Bootstrap 4 提供的类来实现内联样式。以下是一个示例代码：

<div class="jumbotron">
  <h1 class="display-4">Welcome to My Website!</h1>
  <p class="lead">Please fill out the form below:</p>

  <form class="form-inline">
    <div class="form-group mx-sm-3 mb-2">
      <label for="inputName" class="sr-only">Name</label>
      <input type="text" class="form-control" id="inputName" placeholder="Your Name">
    </div>
    <button type="submit" class="btn btn-primary mb-2">Submit</button>
  </form>
</div>

在上述示例中，我们在一个具有 “jumbotron” 类的 div 元素内创建了一个内联表单。form 元素具有 “form-inline” 类，这是 Bootstrap 4 提供的用于内联布局的类。在 form 元素内部，我们使用了 “form-group” 类包裹 input 元素。此外，我们还使用了其他一些 Bootstrap 4 提供的类来添加样式，例如 “mx-sm-3” 和 “mb-2″。

居中内联表单

默认情况下，内联表单元素会在 jumbotron 的左侧对齐。如果我们希望将表单居中显示，我们需要添加一些自定义的 CSS 样式。以下是一个示例代码：

.jumbotron {
  display: flex;
  justify-content: center;
  align-items: center;
}

通过在 jumbotron 的 CSS 样式中添加 “display: flex;”，我们将其设置为一个弹性容器。然后，我们使用 “justify-content: center;” 将内容水平居中，使用 “align-items: center;” 将内容垂直居中。

使用上述 CSS 样式，我们可以将内联表单在 jumbotron 中居中显示。

示例

以下是一个完整的示例，展示了如何使用 CSS 和 Bootstrap 4 在 jumbotron 中居中内联表单：

<!DOCTYPE html>
<html>
<head>
  <title>Center Inline Form in Jumbotron</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .jumbotron {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <div class="jumbotron">
    <h1 class="display-4">Welcome to My Website!</h1>
    <p class="lead">Please fill out the form below:</p>

    <form class="form-inline">
      <div class="form-group mx-sm-3 mb-2">
        <label for="inputName" class="sr-only">Name</label>
        <input type="text" class="form-control" id="inputName" placeholder="Your Name">
      </div>
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </form>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

在运行上述示例时，您将看到一个居中的内联表单显示在 jumbotron 中。