html - Bootstrap 内联无法按预期使用 meteor autoforms

Question

我在 jade 中有以下内容:

+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 类的默认行为不应该处理这个问题吗？我做了哪些不同的事情需要我接受这个额外的步骤？

Answer 1

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