Bootstrap 内联无法与流星自动生成按预期工作答案

【问题标题】：Bootstrap inline not working as expected with meteor autoformsBootstrap 内联无法与流星自动生成按预期工作
【发布时间】：2015-06-23 03:33:24
【问题描述】：

我在翡翠中有以下几点：

+autoForm(id=decidedChargeBoxForm collection="Products" doc=this type="update" class="form-inline")
    +costFormGroup(name="decidedCharge")

这个在 html 中：

<template name="costFormGroup">
    <div class="form-group{{#if afFieldIsInvalid name=name}} has-error{{/if}}">
        <div class="input-group">
            <div class="input-group-addon">$</div>
            {{> afFieldInput name=name placeholder="schemaLabel" label=false}}
        </div>
        {{#if afFieldIsInvalid name=name}}
            <span class="help-block">{{afFieldMessage name=name}}</span>
        {{/if}}
    </div>
</template>

我正在利用bootstrap's inline form class，虽然它正确地使表单元素没有扩展到全宽，但它没有显示内联。相反，它会中断到下一行。截图如下：

我把它扔进了我的css：

.form-inline {
    display: inline;
}

它按预期工作，但我很困惑为什么 step 甚至是必要的。

.form-inline 引导类的默认行为不应该在我的情况下解决这个问题吗？我做了哪些不同的事情需要我采取这个额外的步骤？

【问题讨论】：

标签： html css meteor twitter-bootstrap-3 meteor-autoform

【解决方案1】：

Bootstrap 的form-inline 类将display 属性设置为inline-block 或inline-table（取决于您在子元素上使用的其他类），但您必须记住，这仅在视口至少为 768px 宽的情况。这在 Bootstrap 文档中的 this section 顶部附近进行了说明。我无法从您上面的屏幕截图中看出，但您的视口不是至少 768px 宽吗？这将是未正确定义 Bootstrap 类规则定义的主要原因。此外，您是否有另一个包或您自己的 CSS 代码以某种方式覆盖此行为，并在呈现 Bootstrap 类规则定义后呈现不同的规则？

【讨论】：