Question

我有用于创建表分页表的以下JSF代码：

<h:commandButton 
  value="first"
  action="#{registeredAttendies.pageFirst}"
  disabled="#{registeredAttendies.firstRow == 0}" 
  styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
  <f:ajax render="@form" />
</h:commandButton>
........

我想对此JSF代码应用Bootstrap样式，但效果不佳：

<nav>
  <ul class="pagination-classic">
    <li><a href="#" class="icon icon-xs icon-default mdi mdi-arrow-left-bold"></a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#" class="icon icon-xs mdi mdi-arrow-right-bold"></a></li>
  </ul>
</nav>

我尝试使用：

<h:commandButton value="first"
  action="#{registeredAttendies.pageFirst}"
  disabled="#{registeredAttendies.firstRow == 0}" 
  styleClass="icon icon-xs icon-default mdi mdi-arrow-left-bold"
>
  <f:ajax render="@form" />
</h:commandButton>

但是由于某种原因，结果并不理想。您知道我如何正确应用样式吗？

Answer 1

描述您的确切问题

由于某种原因结果不好

让我想像得很丰富，我想它与h:commandButton被呈现为html input元素（does not work with :before and :after伪类）有关，例如mdi将使用的元素应用所需的图标。如链接的答案中所述，可能的解决方案是将生成的输入元素包装在某种容器中（例如span或div），然后将所需样式应用于该元素。

从Bootstrap主题应用样式

1 个答案: