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

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>

修改

小屏幕上的这个标记也会产生一个＆＃34;掉落的帮助块元素＆＃34;。我认为我的标记有问题，但我不知道出了什么问题。

Answer 1

您的加价似乎一见钟情。关于你的问题1。

您已将输入设置为：

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

因此，使用col-lg-1前缀设置width，另请参阅：https://stackoverflow.com/a/17920693/1596547。 “col-lg-1”堆栈低于992像素。当你的屏幕宽度是> 992 px。 div的宽度为8.333％（100/12）。该 form-control类将输入标记的宽度设置为100％。在992px以下没有“col-lg-1”的定义导致输入的宽度为100％，输入显示为100％宽度。

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

我根本没有找到Chrome的不同行为。高于992px，我会在FF和Chrome上找到它：

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

问题2 ： 您的标签的填充顶部为9px：

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

<。> .radio-inline没有填充，所以将下面的代码添加到你的css：

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

请参阅：https://github.com/twbs/bootstrap/pull/8967