html - 通过 JSF 呈现时， Bootstrap 按钮没有水平填充

Question

我注意到我无法解释的奇怪行为...

我有一系列按钮的地方:

    <h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger">
        <f:ajax render=":form"></f:ajax>
    </h:commandButton>
    <h:commandButton value="bar" actionListener="#{foo.bar}" styleClass="btn btn-danger">
        <f:ajax render=":form"></f:ajax>
    </h:commandButton>
    <h:commandButton value="car" actionListener="#{foo.car}" styleClass="btn btn-danger">
        <f:ajax render=":form"></f:ajax>
    </h:commandButton>

它们都被压扁在一起:

使用渲染标记(通过 Chrome Inspect Element):

<input id="j_idt92" type="submit" name="j_idt92" value="foo" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">
<input id="j_idt92" type="submit" name="j_idt92" value="bar" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">
<input id="j_idt92" type="submit" name="j_idt92" value="car" class="btn btn-danger" onclick="mojarra.ab(this,event,'action',0,'form');return false">

现在，如果我使用这个标记(在输入标签中添加结束斜杠之后)并将其放在我的 View 中，我会看到:

如果我用 class="btn btn-danger" 定义了一组普通按钮，那么它们会按预期间隔显示。

什么会导致这种情况？

Answer 1

这是因为 jsf 组件 trim 空格。要实现你想要的，请在按钮之间放置 #{' '} 表达式

<h:commandButton value="foo" actionListener="#{foo.foo}" styleClass="btn btn-danger">#{' '}
    <f:ajax render=":form"></f:ajax>
</h:commandButton>
<h:commandButton value="bar" actionListener="#{foo.bar}" styleClass="btn btn-danger">#{' '}
    <f:ajax render=":form"></f:ajax>
</h:commandButton>
<h:commandButton value="car" actionListener="#{foo.car}" styleClass="btn btn-danger">
    <f:ajax render=":form"></f:ajax>
</h:commandButton>