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

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>

我需要复选框与其标签保持一致.

推荐答案

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

Demo

.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>

Javascript相关问答推荐

如何才能获取API的所有19页,而不是仅获取我已经编写的代码中的第一页?

如何在Jest中调用setupFile下列出的文件所需的函数?

如何在react js中显示文本字段或2个不同的组件?

为什么我会获取MUI Date TimePicker TypHelp:Value.isValid不是AdapterDayjs.isValid中的函数

在卡信息之间切换

如何使用Paged.js仅渲染特定页面

积分计算和 colored颜色 判断错误

如何访问react路由v6加载器函数中的查询参数/搜索参数

使用AJX发送表单后,$_Post看起来为空

如何解决chrome—extension代码中的错误,它会实时覆盖google—meet的面部图像?'

为什么promise对js中的错误有一个奇怪的优先级?

函数返回与输入对象具有相同键的对象

Regex结果包含额外的match/group,只带一个返回

如何避免页面第一次加载时由于CSS样式通过JavaScript更改而出现闪烁

Use Location位置成员在HashRouter内为空

如何确保预订系统跨不同时区的日期时间处理一致?

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

有效路径同时显示有效路径组件和不存在的路径组件

使用类型:assets资源 /资源&时,webpack的配置对象&无效

Google脚本数组映射函数横向输出