如何使用引导程序对齐组中的复选框

Question

我有一个名为严重性的复选框组，它们分为 2 行，每行 3 个复选框。

但是，复选框的垂直对齐方式不太正确。

我需要在一行中有未分类、警告和高，其他在此行之下。

我使用额外的空 div 来划分它们，有没有更好的方法来实现这一点。 以及如何将复选框与引导程序正确对齐。

Currently Missaligned Screenshot

如您所见，警告和平均值未对齐。

<div class="form-group">
                    <label for="name" class="col-sm-4 control-label">Severity</label>
                    <div class="col-sm-8">
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
                            <label class="form-check-label" for="severity_0">Not classified</label>  
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
                            <label class="form-check-label" for="severity_2">Warning</label>
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
                            <label class="form-check-label" for="severity_4">High</label>
                        </div>
                        <div></div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
                            <label class="form-check-label" for="severity_1">Information</label>  
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
                            <label class="form-check-label" for="severity_3">Average</label>
                        </div>
                        <div class="checkbox-inline">
                            <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
                            <label class="form-check-label" for="severity_5">Disaster</label>
                        </div>
                    </div>
                </div>

Answer 1

您可以使用col 进行布局，但更简单的是使用display: grid;

.checkbox-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-group row">
  <label for="name" class="col-sm-4 control-label">Severity</label>
  <div class="col-sm-8 checkbox-wrapper">
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
      <label class="form-check-label" for="severity_0">Not classified</label>
    </div>
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
      <label class="form-check-label" for="severity_2">Warning</label>
    </div>
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
      <label class="form-check-label" for="severity_4">High</label>
    </div>
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
      <label class="form-check-label" for="severity_1">Information</label>
    </div>
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
      <label class="form-check-label" for="severity_3">Average</label>
    </div>
    <div class="checkbox-inline">
      <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
      <label class="form-check-label" for="severity_5">Disaster</label>
    </div>
  </div>
</div>

Answer 2

您可以使用此代码

<style type="text/css">
.form-group {
  margin: 15px;
}

</style>

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="form-group">
        <label for="name" class="col-md-1 col-sm-1 col-xs-1 control-label">Severity</label>
        <div class="col-md-11 col-sm-11 col-xs-11">
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
            <label class="form-check-label" for="severity_0">Not classified</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
            <label class="form-check-label" for="severity_2">Warning</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_4" name="severity[]" value="4">
            <label class="form-check-label" for="severity_4">High</label>
          </div>
          <div></div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_1" name="severity[]" value="1">
            <label class="form-check-label" for="severity_1">Information</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_3" name="severity[]" value="3">
            <label class="form-check-label" for="severity_3">Average</label>
          </div>
          <div class="checkbox-inline">
            <input class="form-check-input" type="checkbox" id="severity_5" name="severity[]" value="5">
            <label class="form-check-label" for="severity_5">Disaster</label>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 3

无需添加额外的 CSS。使用 Bootstrap 的网格系统来对齐复选框。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      <input class="form-check-input" type="checkbox" id="severity_0" name="severity[]" value="0">
      <label class="form-check-label" for="severity_0">Not classified</label>  
    </div>
    <div class="col-sm-3">
      <input class="form-check-input" type="checkbox" id="severity_2" name="severity[]" value="2">
      <label class="form-check-label" for="severity_2">Warning</label>
    </div>

    ...add more...

  </div>
</div>

您可以根据自己的喜好将列大小更改为col-sm-2 或4。

阅读Bootstrap’s grid system。