css Bootstrap 5内嵌复选框标签

enxuqcxy  于 2023-03-20  发布在  Bootstrap
关注(0)|答案(2)|浏览(154)

为什么复选框与标签不一致?
What I get

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">

    <div class="form-check">
      <input type="checkbox" name="wyroznienie" id="wyroznienie">
      <label for="wyroznienie">
        Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
      </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label for="wyroznienienie2">
        Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
      </label>
    </div>
  </div>
</div>

我需要复选框与其标签一致。

gpfsuwkq

gpfsuwkq1#

使用适当的复选框类:form-check-inputform-check-label
请参见documentation

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

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">

    <div class="form-check">
      <input class="form-check-input" type="checkbox" name="wyroznienie" id="wyroznienie">
      <label class="form-check-label" for="wyroznienie">
        Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
      </label>
    </div>

    <div class="form-check">

      <input class="form-check-input" type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label class="form-check-label" for="wyroznienienie2">
          Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
      </label>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
cuxqih21

cuxqih212#

.form-check中使用display: flex。添加一些margin to the inputpadding to the label

演示

.form-check {
  display: flex !important;
  align-items: flex-start;
}

.form-check>input {
  margin-top: 7px;
}

.form-check>label {
  padding-left: 7px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<div class="row g-1 border-bottom p-3">
  <div class="col border-end justify-content-center d-flex align-items-center">
    <div class="h6 text-sm-center h-25">
      osiągniecia
    </div>
  </div>
  <div class="col ps-3">

    <div class="form-check">
      <input type="checkbox" name="wyroznienie" id="wyroznienie">
      <label for="wyroznienie">
              Świadectwo ukończenia szkoły podstawowej z wyróżnieniem
            </label>
    </div>

    <div class="form-check">
      <input type="checkbox" name="wyroznienie2" id="wyroznienie2">
      <label for="wyroznienienie2">
              Osiągnięcia w zakresie aktywności społecznej, w tym na rzecz środowiska szkolnego, w szczególności w formie wolontariatu
            </label>
    </div>
  </div>
</div>

相关问题