通过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">

现在，如果我使用此标记（在对输入标记添加缩进斜杠之后）并将其放在我的视图中，我会看到：

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

导致这种情况的原因是什么？

Answer 1

这是因为jsf组件修剪空间。要达到你想要的效果＃{＆＃39;按钮之间的表达式

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