使用Algolia和Bootstrap 3的多列结果匹配 [英] result hits in multiple columns using Algolia and Bootstrap 3

问题描述

我正在使用Algolia Instantsearch.js进行搜索，并且要显示我的结果页面，我正在使用Bootstrap 3，并且希望将点击数显示在3列中：

  qry | hit1 | hit2 
 | hit3 | hit4 
 | hit5 | hit6 
  

（其中qry =搜索查询输入小部件）
等。

如果它是移动设备，则应显示为：

  qry 
 hit1 
 hit2 
 hit3 
等。
  

有人可以帮我吗可以使用html / css实现此功能？
谢谢！

解决方案

基本上，您想使用bootstrap row 和网格布局 col- {xs，sm，md，lg} -X （有关网格布局的更多信息此处）。

使用 bootstrap 的一个有趣属性是，如果您声明作为块，如果屏幕宽度小于YY关联的尺寸，它将自动扩展到全宽。

instantsearch.js 的小部件公开一个 cssClasses 参数，该参数使您可以自定义基础标记的类。

要轻松地进行两列操作，您需要做的就是将 cssClasses 的 root 元素声明为 .row。 ，每个结果都为 .col-sm-6 （或 .col-md-6 或 .col-lg-6

通过组合它们，您可以得到一些非常有趣的布局。

参见此JSFiddle

在这里，我已经扩展了有点想法。尝试调整视图的大小，您将看到它通过结合多个 col-YY-X 类自动根据宽度选择每行显示的结果数

  search.addWidget（
 Instantsearch.widgets.hits（{ 
容器：'＃hits'，
模板：{
空：'无结果'，
项目：'< div class = hit> {{title} }< / div>'
}，
 hitsPerPage：6，
 cssClasses：{
 root：'row'，
项目：'col-lg-3 col-md-4 col-sm-6'
} 
}）
）; 
  

如您所见，我还在中添加了一个内部类item 模板，以便能够将该项目用作包装器，并在其中添加 padding 来避免匹配内容相互粘连。我将 border 应用于内部元素，因为在引导网格元素上添加 margin 是不合适的解决方案。 / p>

布局本身非常简单，您可以将行嵌套在一起：

 < div class = container-fluid> 
< div id = search class = row> 
< div class = col-sm-4> 
< div id = input>< / div> 
< / div> 
< div class = col-sm-8> 
< div id = hits class = row> 
< / div> 
< / div> 
< / div> 
< / div> 
  

I'm using Algolia instantsearch.js for search, and to display my result page, I'm using Bootstrap 3, and I'd like hits to be displayed in 3 columns:

qry | hit1 | hit2
    | hit3 | hit4
    | hit5 | hit6

(where qry = the search query input widget) etc..

If it's mobile, it should display as:

qry
hit1
hit2
hit3
etc.

Can someone help me with the html/css I can use to implement this? Thanks!

解决方案

Basically, you want to use bootstrap rows and grid layout col-{xs,sm,md,lg}-X (More info about the grid layout here).
One interesting property with bootstrap is that if you declare a block as being col-YY-X, if the screen width is under the dimensions YY is associated with, it automatically expands to the full width.
instantsearch.js's widgets expose a cssClasses parameter that allows you to customize the classes of the underlying markup.

To easily do two columns, all you need to do is declare the root element of the cssClasses as being a .row, and each result as a .col-sm-6 (or .col-md-6 or .col-lg-6 depending on which screen size you want it to apply).

By combining them, you can have some really interesting layouts.
See this JSFiddle

Here, I've extended a bit the idea. Try to resize the view, and you'll see that it automatically picks a number of results to display per line depending on the width by combining multiple col-YY-X classes on the hit widget.

search.addWidget(
  instantsearch.widgets.hits({
    container: '#hits',
    templates: {
      empty: 'No results',
      item: '<div class="hit">{{title}}</div>'
    },
    hitsPerPage: 6,
    cssClasses: {
      root: 'row',
      item: 'col-lg-3 col-md-4 col-sm-6'
    }
  })
);

As you can see, I've also added an inner class to the item template to be able to use the item as a wrapper with padding inside to avoid having the hits glued to each other. I apply the border to the inner element, because adding margins to bootstrap grid elements is not the right solution.

The layout itself is really simple, you can just nest rows together:

<div class="container-fluid">
  <div id="search" class="row">
    <div class="col-sm-4">
      <div id="input"></div>
    </div>
    <div class="col-sm-8">
      <div id="hits" class="row">
      </div>
    </div>
  </div>
</div>

这篇关于使用Algolia和Bootstrap 3的多列结果匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！