4.3.4. styling

根据您拥有的服务数量，向生成的标记添加一些最终的接触。在这个示例中，它有两个，因此 service-column div 的 CSS 代码将是：

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}

.service-column {
    float: left;
    margin-left: 10%;
    width: 45%;
}
.service-column:first-child {
  margin-left: 0;
}

Copy to Clipboard

Toggle word wrap

在示例中，我们使用了基于百分比的布局动态地分配包含维度的尺寸上列的宽度。

现在，您应该有一个正常工作且良好地忽略多个服务子版本。祝贺您！

如果您希望以特定顺序显示列，请尝试使用条件表达式(if/else/case)条件服务名称或其他值。

学习

尝试、购买和销售

社区

关于红帽文档

通过我们的产品和服务，以及可以信赖的内容，帮助红帽用户创新并实现他们的目标。了解我们当前的更新.

让开源更具包容性

红帽致力于替换我们的代码、文档和 Web 属性中存在问题的语言。欲了解更多详情，请参阅红帽博客.

關於紅帽

我们提供强化的解决方案，使企业能够更轻松地跨平台和环境（从核心数据中心到网络边缘）工作。

Theme

© 2026 Red Hat

返回顶部