Html 引导按钮在通过JSF渲染时没有水平填充

我注意到同样的奇怪行为，我无法解释

其中我有一系列按钮：

    <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元素）：

现在，如果我将这个标记（在向输入标记添加结束斜杠之后）放到视图中，我会看到：

如果我用

class=“btn btn danger”

定义了一组普通按钮，则它们的间距与预期一致

---

这是什么原因造成的？

这是因为jsf组件修剪空格。要实现所需，请在按钮之间放置#{''}表达式

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

#{'}
#{' '}

到底是什么空格？空格、换行符、制表符。幸运的是，我认为你是对的。JSF再次攻击。除非第二天左右有人能提出更好的解决办法，否则我会认为你的答案是正确的。

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