结果使用Algolia和Bootstrap 3在多列中命中

我正在使用Algolia instantsearch.js进行搜索,并显示我的结果页面,我正在使用Bootstrap 3,我希望点击显示在3列中:

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

(其中qry =搜索查询输入小部件)等.

如果它是移动的,它应显示为:

qry
hit1
hit2
hit3
etc.

有人可以用html/css帮助我实现这个吗？谢谢!

基本上,您希望使用引导程序row和网格布局col-{xs,sm,md,lg}-X(此处有关网格布局的更多信息).
一个有趣的属性bootstrap是,如果您声明一个块col-YY-X,如果屏幕宽度低于YY所关联的尺寸,它会自动扩展到整个宽度.
instantsearch.js的小部件公开了一个cssClasses参数,允许您自定义基础标记的类.

要轻松地执行两列,您需要做的就是将a的root元素声明cssClasses为a .row,并将每个结果声明为.col-sm-6(.col-md-6或者.col-lg-6取决于您希望它应用的屏幕大小).

通过组合它们,您可以拥有一些非常有趣的布局.
看到这个JSFiddle

在这里,我扩展了一点想法.尝试调整视图的大小,您会看到它会自动选择要显示的每行结果,具体取决于宽度,方法col-YY-X是在命中小部件上组合多个类.

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