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

How to align inline radios / checkboxes and help-block elements in horizontal form with Twitter's Bootstrap 3

提问by edigu

Few days ago Twitter Bootstrap 3 RC1 releasedand i just started to play with it on a personal project.

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

I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:

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

Question 1: Why chrome doesn't displays help-block element on the same line with the label?

问题 1：为什么 chrome 不显示与标签在同一行的帮助块元素？

Question 2: How to align inline radio group on the same line with label?

问题 2：如何将 inline radio group 与 label 对齐在同一行？

Question 3: Is following markup valid? Are these problems related with the markup?

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

Markup:

标记：

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

EDIT:

编辑：

Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.

此外，小屏幕上的此标记会生成“删除的帮助块元素”。我认为我的标记有问题，但我不知道出了什么问题。

采纳答案by Bass Jobsen

Your markup seems to be valid on first sight. About your question 1.

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

You have set your input with:

您已设置输入：

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

So to width is set with the col-lg-1 prefix, see also: https://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width.

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

Try to use the col-* prefixes which never stacks (or use other CSS to set the width)

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

I did not found different behavior for Chrome at all. Above the 992px i will find this on both FF and Chrome:

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

I did not found a solution for your second question yet.

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

Question 2: Your labels got a padding-top of 9px from:

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

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

the .radio-inline have no padding, so add the code below to your css:

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

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

See: https://github.com/twbs/bootstrap/pull/8967

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