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

Question

几天前Twitter Bootstrap 3 RC1发布,我刚开始在个人项目中使用它.

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

问题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>

编辑:

此小标签上的这个标记也会产生"掉线帮助块元素".我认为我的标记有问题,但我不知道出了什么问题.

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像素.div的宽度为8.333%(100/12).表单控件类将输入标记的宽度设置为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