CSS 在Bootstrap中将标签与单选按钮对齐

在本文中，我们将介绍如何在Bootstrap中使用CSS将标签与单选按钮对齐。

在开发网页时，我们经常需要使用表单元素。在表单中，标签与输入字段的对齐是非常重要的，因为良好的对齐可以提升用户界面的可用性和美观性。在Bootstrap中，提供了一些类和样式使得对齐表单元素变得更加简单。

阅读更多：CSS 教程

方法一：使用Bootstrap的form-check类

在Bootstrap中，可以使用form-check类来实现标签与单选按钮的对齐。首先，我们需要在单选按钮和标签的包裹元素中添加form-check类。例如，我们有一个单选按钮和一个标签的HTML代码如下：

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
  <label class="form-check-label" for="exampleRadios1">
    Option 1
  </label>
</div>

上述代码中，form-check类被添加到了div标签上，用于包裹单选按钮和标签。form-check-input和form-check-label类被添加到了单选按钮和标签上，用于对其样式的修饰。

方法二：使用自定义CSS样式

如果Bootstrap提供的默认样式无法满足我们的需求，我们可以使用自定义CSS样式来对齐标签和单选按钮。以下是一种常见的实现方式：

.custom-radio {
  display: flex;
  align-items: center;
}

.custom-radio input[type="radio"] {
  margin-right: 10px;
}

上述CSS代码中，我们使用了display: flex和align-items: center来实现垂直居中对齐。margin-right属性用于设置单选按钮与标签之间的间距。

然后，我们将上述CSS样式应用到单选按钮和标签的包裹元素上。例如：

<div class="custom-radio">
  <input type="radio" id="radio1" name="radio">
  <label for="radio1">Option 1</label>
</div>

示例

下面是一个使用Bootstrap的form-check类和自定义CSS样式对齐标签和单选按钮的实例。

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    .custom-radio {
      display: flex;
      align-items: center;
    }

    .custom-radio input[type="radio"] {
      margin-right: 10px;
    }
  </style>
</head>
<body>

  <div class="container mt-3">
    <h1>Lining up Labels with Radio Buttons in Bootstrap</h1>

    <h2>Using Bootstrap's form-check class:</h2>
    <div class="form-check">
      <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1">
      <label class="form-check-label" for="exampleRadios1">
        Option 1
      </label>
    </div>

    <h2>Using custom CSS style:</h2>
    <div class="custom-radio">
      <input type="radio" id="radio1" name="radio">
      <label for="radio1">Option 1</label>
    </div>
  </div>

</body>
</html>