Javascript Algolia搜索结果超出了css格式

我正在使用algolia搜索进行搜索。一切正常，但搜索结果不是显示在列中，而是以列表格式显示

这是正常html代码中的显示 但是，当使用algolia搜索结果使用下面的代码填充容器时，它会显示以下内容

我有这个html文件

    <div class="row isotope-grid" id="hits" >
        <!-- Load more -->
        <div class="flex-c-m flex-w w-full p-t-45">
            <a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
                Load More
            </a>
        </div>
    </div>

这是JS格式

         var search = instantsearch({
          // Replace with your own values
                appId: 'E525782525525',
                apiKey: 'xxxxxxxxx, 
                indexName: 'Listing',
                urlSync: true,
                searchParameters: {
                  query: "2",
                  // hitsPerPage: 10
                }
              });


         search.addWidget(
           instantsearch.widgets.hits({
            container: '#hits',
            templates: {
              empty: 'No results',
              item: `

                            <div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
                <!-- Block2 -->
                <div class="block2">
                    <div class="block2-pic hov-img0">
                        <img src="images/product-03.jpg" alt="IMG-PRODUCT">
                        <a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
                            Quick View
                        </a>
                    </div>

                    <div class="block2-txt flex-w flex-t p-t-14">
                        <div class="block2-txt-child1 flex-col-l ">
                            <a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
                                Only Check Trouser
                            </a>

                            <span class="stext-105 cl3">
                                $25.50
                            </span>
                        </div>

                        <div class="block2-txt-child2 flex-r p-t-3">
                            <a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
                                <img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
                                <img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

              `
              ,

               }
              })
            );
          search.start();

var search=instantsearch({
//替换为你自己的价值观
appId:'E525782525525'，
apiKey:'xxxxxxxxx，
indexName:'列表'，
urlSync:true，
搜索参数：{
查询：“2”，
//命中率：10
}
});
search.addWidget(
instantsearch.widgets.hits({
容器：“#命中”，
模板：{
空：“无结果”，
项目：`
$25.50
`
,
}
})
);
search.start（）；

我已经能够排除css，并发现ALgolia正在覆盖显示。如何修改代码以显示列的自定义显示而不是默认的Algolia列表显示

在实现Dipen Shah的答案后，它在渲染时部分工作并产生wierd重叠，但如果窗口宽度或高度减小，重叠消失，并返回到完整大小

下面是重叠部分的外观

问题 我认为您使用的模板方法不正确

Aloglia的文档给出：

Javascript：

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      item: document.getElementById('hit-template').innerHTML,
      empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
    }
  })
);

<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
  <div class="hit">
    <div class="hit-image">
      <img src="{{image}}" alt="{{name}}">
    </div>
    <div class="hit-content">
      <h3 class="hit-price">${{price}}</h3>
      <h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
      <p class="hit-description">{{{_highlightResult.description.value}}}</p>
    </div>
  </div>
</script>

HTML:

${{price}

您的代码缺少非常重要的函数调用，这就是您的搜索结果无法正确呈现的原因

从

div#hits

我尝试了这一点，但搜索的渲染仍在进行中vertical@learner101您能确认您的CSS文件仍在加载吗？是的，已加载。如果不使用algolia，它可以正常工作并正确显示。这是我正在使用的模板。你确定加载的数据中存在相同的类吗？部分工作正常，我已经用信息更新了问题。造成重叠的原因是什么？@learner101无法重现问题，请检查我的代码，如果您可以发布代码，我可以进一步检查issue@lerner101你能发布你的完整代码吗？你在pastebin中发送的代码在我的电脑chrome和Firefox上都能正常工作。让我们来看看。