0

我在翡翠中有以下内容：

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

我正在利用引导程序的内联表单类，虽然它正确地使表单元素没有扩展到全宽，但它没有显示内联。相反，它会中断到下一行。这是一个屏幕截图：

糟糕的形式

我把它扔进了我的CSS：

.form-inline {
    display: inline;
}

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

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

4

1 回答 1

0

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

于 2015-04-17T02:51:06.190 回答