代码之家 › 专栏 › 技术社区 › Nate Pet

将复选框与标签对齐

twitter-bootstrap css

Nate Pet · 技术社区 · 6 年前

我在引导程序中有以下代码。我需要将标签与复选框对齐,但即使在研究了一些解决方案之后,我仍然没有成功:

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <label>
      Show entities?
      <input type="checkbox" style="margin: 6px 0 0;" id="inactiveEnt" name="checkbox">
    </label>
  </div>           
  <div class="col-md-8" id="isactiveTxt">
    <span style="font-weight:bold">Note: "-" inactive</span>
  </div>
</div>

4 回复 | 直到 6 年前

Girisha C 6 年前

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="form-group form-check">
  <input type="checkbox" class="form-check-input" id="exampleCheck1">
  <label class="form-check-label" for="exampleCheck1">Show entities?</label>
</div>

<!-- or using inline form -->

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="inlineFormCheck">
  <label class="form-check-label" for="inlineFormCheck">
    Show entities?
  </label>
</div>

Girisha C 6 年前

请尝试此代码片段,希望它能帮助您:

<div class="row">
  <div class="col-md-3 col-sm-6 col-xs-12">
    <label class="d-flex align-items-center"> Show entities? <input type="checkbox"  id="inactiveEnt" name="checkbox" class="ml-3"> </label>
  </div>           
  <div class="col-md-8" id="isactiveTxt">
    <span style="font-weight:bold">Note: "-" inactive</span>
  </div>
</div>

M. Kloz 6 年前

如果您使用的是引导程序,只需使用一个表单组。通过使用与输入ID匹配的“for”属性创建标签并引用输入。

<div class="form-group row">
    <label for="myInput" class="col-sm-2 col-form-label">Input Label</label>
    <div class="col-sm-10">
      <input type="checkbox" class="form-check-input" id="myInput" placeholder="Input Here">
    </div>
</div>

marc_s Anurag 5 年前

如果我理解您的需求,我认为这可能是您正在寻找的解决方案(将类btn和btn默认添加到您的输入元素,以便与标签文本垂直对齐)

<div class="row">
  <div class="col-xs-12">
    <span>
      <input type="checkbox" class="btn btn-default">
    </span>
    <label class="form-label">here is my label</label>
  </div>
</div>

这是小提琴: https://jsfiddle.net/p9wud84v/1/

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前