Bootstrap inline与流星自动形式无法正常工作

Question

我在玉中有以下内容：

+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;
}

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

.form-inline bootstrap类的默认行为是否应该在我的情况下处理这个问题？我做了哪些不同的事情需要我采取这个额外的步骤？< / p>

Answer 1

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