如何使用 Twitter 的 Bootstrap 3 以水平形式对齐内联单选框/复选框和帮助块元素答案

【问题标题】：How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3如何使用 Twitter 的 Bootstrap 3 以水平形式对齐内联单选框/复选框和帮助块元素
【发布时间】：2013-08-02 03:43:09
【问题描述】：

几天前Twitter Bootstrap 3 RC1 released 我刚刚开始在个人项目中使用它。

我有一个水平表单，其中包括一些内联单选复选框组，但这些元素的水平对齐方式不相等：

问题 1：为什么 chrome 不显示 help-block 元素与标签在同一行？

问题2：如何将同一行的内联单选组与标签对齐？

问题 3：以下标记有效吗？这些问题是否与标记有关？

标记：

<div class="container">
  <form class="form-horizontal">

  <div class="form-group">
    <label class="col-lg-2 control-label">Weight</label>
    <div class="col-lg-1">
      <input type="text" name="weight" class="form-control" value="20">
    </div>
    <div class="help-block"> grams</div>  
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Full part name</label>
    <div class="col-lg-6">
      <input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
    </div>
  </div>

  <div class="form-group">
    <label class="col-lg-2 control-label">Inline radios</label>
    <div class="col-lg-10">
      <label class="radio-inline">
        <input type="radio" name="radio"> Hello
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Other
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio"> Another
      </label>
      <label class="radio-inline">
        <input type="radio" name="radio" checked="checked"> Foobar
      </label>
    </div>
  </div>
</form>
</div>

编辑：

此外，小屏幕上的这个标记会产生一个“丢弃的帮助块元素”。我认为我的标记有问题，但我不知道出了什么问题。

【问题讨论】：

标签： forms twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的标记乍一看似乎是有效的。关于您的问题 1。

您已将输入设置为：

<div class="col-lg-1">
  <input type="text" name="weight" class="form-control" value="20">
</div>

所以宽度设置为 col-lg-1 前缀，另见：https://stackoverflow.com/a/17920693/1596547。 “col-lg-1”堆栈低于 992 像素。当您的屏幕宽度大于 992 像素时。 div 的宽度为 8.333% (100/12)。这 form-control 类将输入标签的宽度设置为 100%。在 992px 以下没有定义 "col-lg-1" 导致输入的 100% 宽度，输入以 100% 宽度显示。

尝试使用从不堆叠的 col-* 前缀（或使用其他 CSS 设置宽度）

我根本没有发现 Chrome 的不同行为。在 992px 以上，我会在 FF 和 Chrome 上找到这个：

~~我还没有为您的第二个问题找到解决方案。~~

问题 2：您的标签从以下位置获得了 9px 的 padding-top：

 .form-horizontal .control-label {
     padding-top: 9px;
  }

.radio-inline 没有填充，因此将以下代码添加到您的 css：

.radio-inline, .checkbox-inline {
    padding-top: 9px;
 }

见：https://github.com/twbs/bootstrap/pull/8967

【讨论】：