没有标签文本的复选框的引导形式水平垂直对齐

Posted

技术标签:

【中文标题】没有标签文本的复选框的引导形式水平垂直对齐【英文标题】:Bootstrap form-horizontal vertical alignment of checkboxes without label text 【发布时间】:2014-09-14 17:58:51 【问题描述】:

今天早上我已从 Bootstrap 3.0.0 更改为 3.2.0,因为我的 Web 应用程序需要一些新功能。一切似乎都按预期工作,直到我发现.form-horizontal 表单中复选框的垂直对齐问题。

http://www.bootply.com/AYN64feYze 提供了一个示例。这个最小示例的标记是:

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox"> label text
              </label>
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
              <label>
                  <input type="checkbox">
              </label>
            </div>
          </div>
    </div>
</div>

如果复选框没有后续文本,则将其移至应出现的行下方。

这个问题有解决办法吗?由于我已经有了前导标签,因此我的复选框不需要以下文本。我当前的解决方法是向包含&lt;input type="checkbox"&gt;&lt;label&gt; 添加文本,并使用背景颜色作为字体颜色来隐藏文本。

感谢您的帮助。

【问题讨论】:

【参考方案1】:

我不确定这是否会影响表单布局的其余部分,但如果将&lt;label&gt;(当前设置为inline-block)的显示属性更改为:

label
    display:inline;

这是updated Bootply。希望这可以帮助!如果您有任何问题,请告诉我。

【讨论】:

很好的答案。通过为“空”复选框添加一个类,我能够将它合并到我的 CSS 中。通过使用.checkbox-empty label display:inline,我可以将新样式应用于所有没有文本的复选框,而不会影响其他复选框或标签。谢谢! 很高兴能帮上忙!【参考方案2】:

如果您不需要复选框的以下文本,为什么不直接删除复选框周围的&lt;label&gt;。像这样。

<div class="form-horizontal">
    <div class="form-group">
      <label class="col-sm-2 control-label" for="check1">With label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check1">
            </div>
          </div>
    </div>
  <div class="form-group">
      <label class="col-sm-2 control-label" for="check2">Without label text</label>
          <div class="col-sm-10">
            <div class="checkbox">
                  <input type="checkbox" id="check2">
            </div>
          </div>
    </div>
</div>

当我尝试此代码时,它似乎可以在您的 Bootply 中运行。

请记住,如果您有一个标签来使用屏幕阅读器的 for 属性并让您的用户更容易(他们只需点击标签而不是复选框)。

【讨论】:

是的,此标记有效,但复选框不会与其他输入元素对齐(例如 &lt;input type="text" /&gt;)。要对齐复选框,您也必须删除 &lt;div class="checkbox"&gt;。见bootply。当您删除 &lt;label&gt; 标记时,bootply 显示不正确的水平对齐方式,而当您同时删除 &lt;label&gt;&lt;div class="checkbox"&gt; 标记时显示正确的对齐方式。不过,感谢您的回答并提醒我for 属性;)【参考方案3】:

这对我有用:

<div class="form-group">
    <div class="col-lg-3">
        <label class="pull-right" for="MyCheckBox">My Checkbox</label>
    </div>
    <div class="col-lg-9">
        <input type="checkbox" name="MyCheckBox">
    </div>
</div>    

首先,我必须删除 &lt;div class='checkbox'&gt; 元素。然后我对复选框标签元素进行了以下更改:

    将标签放在自己的列 div &lt;div class="col-lg-3"&gt;&lt;/div&gt; 移除 class="control-label" 添加 class="pull-right"。

我最终得到了一个复选框,它与其他输入水平对齐并与它的标签垂直对齐。

【讨论】:

是的,这绝对是一个解决方案,也是一个简单的解决方案。感谢分享。我做了一个 bootply 作为你的解决方案的演示 bootply.com/cCSKDNvW7O。

以上是关于没有标签文本的复选框的引导形式水平垂直对齐的主要内容,如果未能解决你的问题,请参考以下文章

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

div的水平和垂直对齐

pyqt5 tabwidget 垂直制表符 水平文本左对齐

如何将引导卡从水平堆叠到垂直以使其响应?

如何垂直或水平对齐定向文本?

SwiftUI 中的布局与水平和垂直对齐