0

我正在尝试自定义店面（尤其是类别页面）并面临以下问题：基于 Bootstrap 框架的普通 html 结构如下所示：

<div class="row">
   <div class="col-lg-3">facets here</div>
   <div class="col-lg-9">list of products here</div>
</div>

我创建了自定义 ProductListComponent 和 ProductListItemComponent 组件（在 Spartacus 端）。当前浏览器检查器中的结构如下所示：

<cx-page-layout class="ProductListPageTemplate">
  <div class="row">
    <cx-page-slot class="ProductLeftRefinements">
      <product-facet-navigation>
          <div class="col-lg-3">facets here</div>
      </product-facet-navigation>
    </cx-page-slot>
    <cx-page-slot class="ProductListSlot">
      <product-list>
          <div class="col-lg-9">list of products here</div>
      </product-list>
    </cx-page-slot>
  </div>
</cx-page-layout>

主要问题是有像这样的包装标签<cx-page-slot>，它会破坏显示块我如何在斯巴达克斯中解决它？我试着说，例如在我们的例子div's中，col-lg-*应该放置在彼此附近，以防止破坏 Bootstrap 框架逻辑

4

1 回答 1

0

CSS 有一个display: contents规则，您可以使用它来确保 CSS 层忽略某些元素，这样您就不会破坏 CSS 流程。

你可以申请：

cx-page-slot {
  display: contents;
}

我没有用斯巴达克斯测试过这个，但我相信这是可行的。你能仔细检查并反馈给我们吗？

于 2020-03-13T14:01:06.207 回答