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

正确对齐一组复选框（其中一个或多个复选框有关联的文本输入）的最优雅的方法是什么？无论我尝试过什么，我最终都会遇到间隔不均的I复选框，或ii未对齐的复选框，或iii未对齐的标签，或iv未对齐的文本框

从以下用例开始：

你最喜欢的食物是什么？ 苹果 香蕉 胡萝卜 d其他：_______

这肯定很常见，在我开始将自己的类强制加入代码之前，我想知道是否有人找到了使用引导标准类实现这一点的方法

以下是我现在掌握的代码：

<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”太低。

这里有一种方法可以实现您想要做的事情。我对您的HTML结构所做的唯一更改是，我将每个复选框的描述包装在一个标记中，并使用以下CSS添加：

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

这是一个有效的演示：

输入[类型=复选框]{ 职位：相对！重要； 显示：内联块； 垂直对齐：文本底部； } 跨度{ 显示：内联块； 垂直对齐：中间对齐； } .form inline.form控件{ 填充顶部：0px； 垫底：0px； 高度：20px； } 喜爱的食物 苹果 香蕉 另外 来自以下颜色组之一的任何水果：

---

这里有一种方法可以实现你的目标。我对您的HTML结构所做的唯一更改是，我将每个复选框的描述包装在一个标记中，并使用以下CSS添加：

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

这是一个有效的演示：

输入[类型=复选框]{ 职位：相对！重要； 显示：内联块； 垂直对齐：文本底部； } 跨度{ 显示：内联块； 垂直对齐：中间对齐； } .form inline.form控件{ 填充顶部：0px； 垫底：0px； 高度：20px； } 喜爱的食物 苹果 香蕉 另外 来自以下颜色组之一的任何水果：

---

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

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

---

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

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

---

嗨，塞巴斯米莉亚-这很漂亮，有助于把事情安排好！我只是把标签放错地方了。但是，你的答案并不能使复选框的间距均匀。在代码段中，第三行的填充空间仍然比其他行多，这使得复选框的垂直间距不均匀。有什么想法吗？额外的间距是因为文本输入的默认大小。由于文本输入上的.input sm对于您的需要来说仍然太大，恐怕没有其他方法可以手动调整其他复选框的填充。除此之外，在另一个文本框之后添加更多的内联单选按钮更是疯狂。Bootstrap处理得非常糟糕。嗨，Sebsemillia-这非常漂亮，有助于把事情安排好！我只是把标签放错地方了。但是，你的答案并不能使复选框的间距均匀。在代码段中，第三行的填充空间仍然比其他行多，这使得复选框的垂直间距不均匀。有什么想法吗？额外的间距是因为文本输入的默认大小。由于文本输入上的.input sm对于您的需要来说仍然太大，恐怕没有其他方法可以手动调整其他复选框的填充。除此之外，在另一个文本框之后添加更多的内联单选按钮更是疯狂。Bootstrap处理得很差。嗨，Fahad。非常感谢。输出与上面Sebsemillia的答案相同，但我担心a不够优雅，因为您已经创建了自己的类，而b在复选框间距不均匀方面也有同样的问题。@MSC添加标记完全可以，不会使代码变得不优雅。其次，复选框的间距不均匀是因为输入字段的高度与其他字段相邻。我已经更新了上面的答案，如果您在整个页面中运行代码段，您可以看到，由于我降低了输入字段的高度，现在复选框的间隔是均匀的。谢谢，Fahad。我感谢你投入的时间。不过，我希望我所有的文本框都是标准高度。嗨，法哈德。非常感谢。输出与上面Sebsemillia的答案相同，但我担心a不够优雅，因为您创建了自己的类，而b遇到了与复选框间距不均匀相同的问题。@MSC它是c

---

完全可以添加一个标记，并且不会降低代码的优雅程度。其次，复选框的间距不均匀是因为输入字段的高度与其他字段相邻。我已经更新了上面的答案，如果您在整个页面中运行代码段，您可以看到，由于我降低了输入字段的高度，现在复选框的间隔是均匀的。谢谢，Fahad。我感谢你投入的时间。不过，我更喜欢所有的文本框都是标准高度。