引导对齐和垂直复选框与相关水平文本字段的间距

Question

正确对齐一组复选框的最优雅（即非hacky）方法是什么，其中一个或多个复选框具有相关的文本输入？无论我尝试过什么，我最终得到（i）不均匀间隔的复选框，或（ii）未对齐的复选框，或（iii）未对齐的标签，或（iv）未对齐的文本框。

自用例以来：

你最喜欢的食物是什么？ （一个苹果 （b）香蕉 （c）胡萝卜 （d）其他：_______

肯定很常见，我想知道是否有人在开始强制我自己的类进入代码之前，已经找到了使用Bootstrap标准类的方法。

以下是我现在的代码：

<div class="form-group">
                    <label class="col-sm-2 control-label">
                       Favourite food
                    </label>
                    <div class="col-sm-10">
                        <div class="checkbox">
                            <label>
                                <fieldset class="form-inline">
                                    <input type="checkbox"/>
                                    Apple
                                 </fieldset>   
                            </label>
                        </div>
                        <div class="checkbox">
                            <label>
                                <fieldset class="form-inline">
                                    <input type="checkbox"/>
                                    Banana 
                                </fieldset>
                            </label>
                        </div>
                        <div class="checkbox">
                                <label>
                                    <fieldset class="form-inline">
                                        <input type="checkbox"/>
                                        Other <input type="email" placeholder="someone@somewhere.com" class="form-control"/>
                                    </fieldset>
                                </label>
                        </div>
                        <div class="checkbox">
                                <label>
                                    <fieldset class="form-inline">
                                        <input type="checkbox"/> Any fruit from one of these colour groups: <a href="">Red, Green, Blue</a>
                                    </fieldset>
                                </label>
                        </div>

                    </div>
                </div>

在Chrome中显示输出的屏幕截图：

第四个复选框与第三个复选框相距太远，而第三行的文本和'input type = text'太低。

Answer 1

是的，有一种简单的引导方式，只需将复选框的代码更改为：

<div class="checkbox">
    <div class="form-inline">
        <label>                                    
            <input type="checkbox"/>
            Other 
        </label>   
        <input type="email" placeholder="someone@somewhere.com" class="form-control"/>
    </div>
</div>

Working Example

Answer 2

这是实现您尝试做的事情的一种方法。我对您的HTML结构进行的唯一更改是，我已将<span>标记内的每个复选框的描述包装起来并添加了使用此CSS：

input[type="checkbox"] {
    position: relative !important;
    display: inline-block;
    vertical-align: text-bottom;
}
span {
    display: inline-block;
    vertical-align: middle;
}

这是一个有效的演示：

＆＃13;

＆＃13;

input[type="checkbox"] {
  position: relative !important;
  display: inline-block;
  vertical-align: text-bottom;
}
span {
  display: inline-block;
  vertical-align: middle;
}
.form-inline .form-control {
  padding-top: 0px;
  padding-bottom: 0px;
  height: 20px;
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
  <label class="col-sm-2 control-label">Favourite food</label>
  <div class="col-sm-10">
    <div class="checkbox">
      <label>
        <fieldset class="form-inline">
          <input type="checkbox" /> <span>Apple</span>

        </fieldset>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <fieldset class="form-inline">
          <input type="checkbox" /> <span>Banana</span> 
        </fieldset>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <fieldset class="form-inline">
          <input type="checkbox" /> <span>Other</span> 
          <input type="email" placeholder="someone@somewhere.com" class="form-control" />
        </fieldset>
      </label>
    </div>
    <div class="checkbox">
      <label>
        <fieldset class="form-inline">
          <input type="checkbox" /> <span>Any fruit from one of these colour groups: <a href="">Red, Green, Blue</a></span>

        </fieldset>
      </label>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;