将 Bootstrap 个复选框移动到水平而不是堆叠

Question

请原谅我的新手，因为我只是一个初学者。我希望移动以下在我的网站上垂直显示的复选框，使其并排对齐，而不是相互堆叠。我知道我将它们排成一排 div，但复选框的行为方式与它们相同。无论如何，以下是适用于此问题的代码。如果有任何建议可以节省，将不胜感激。

 <div class="form-check">
      <input
        class="form-check-input"
        type="checkbox"
        value
        id="flexCheckChecked"
        checked
      />Half Day
      <label class="form-check-label" for="flexCheckChecked"></label>
    </div>
    <div>
      Travel
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value
          id="flexCheckChecked"
          checked
        />None
        <label class="form-check-label" for="flexCheckChecked"></label>
      </div>
    </div>
    <div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value
          id="flexCheckChecked"
          checked
        />One Way
        <label class="form-check-label" for="flexCheckChecked"></label>
      </div>
    </div>
    <div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value
          id="flexCheckChecked"
          checked
        />Round Trip
        <label class="form-check-label" for="flexCheckChecked"></label>
      </div>
    </div>
    <div>
      <div class="form-check">
        <input
          class="form-check-input"
          type="checkbox"
          value
          id="flexCheckChecked"
          checked
        />Round Trip
        <label class="form-check-label" for="flexCheckChecked"></label>
      </div>
    </div>
    <div class="row">

Answer 1

你是这个意思吗？

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

<div class="form-check">
    <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Half Day
    <label class="form-check-label" for="flexCheckChecked"></label>
</div>

<div>
    Travel
</div>

<div class="row">
    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>None
            <label class="form-check-label" for="flexCheckChecked"></label>
        </div>
    </div>

    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>One Way
            <label class="form-check-label" for="flexCheckChecked"></label>
        </div>
    </div>


    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Round Trip
            <label class="form-check-label" for="flexCheckChecked"></label>
        </div>
    </div>


    <div class="col">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked>Round Trip
            <label class="form-check-label" for="flexCheckChecked"></label>
        </div>
    </div>

</div>

Answer 2

您甚至不需要将它们包裹在 row/col 中。 Bootstrap 内置了对水平堆叠复选框的支持 (Inline Checkboxes Documentation)。

不要将您的复选框包裹在另一个 div.
将 form-check 更改为 form-check form-check-inline。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <div>
    Travel
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />None
      <label class="form-check-label" for="flexCheckChecked"></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />One Way
      <label class="form-check-label" for="flexCheckChecked"></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />Round Trip
      <label class="form-check-label" for="flexCheckChecked"></label>
    </div>
    <div class="form-check form-check-inline">
      <input class="form-check-input" type="checkbox" value id="flexCheckChecked" checked />Round Trip
      <label class="form-check-label" for="flexCheckChecked"></label>
    </div>
  </div>
</body>

</html>

将 Bootstrap 个复选框移动到水平而不是堆叠

Shift Bootstrap Checkboxes to horizontal rather than stacked

html

bootstrap-4