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

Question

几天前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>

编辑:

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

Answer 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