twitter-bootstrap-3 – 结果使用Algolia和Bootstrap 3在多列中

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

qry
hit1
hit2
hit3
etc.

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

要轻松完成两列,您需要做的就是将cssClasses的根元素声明为.row,并将每个结果声明为.col-sm-6(或.col-md-6或.col-lg- 6取决于您希望它应用的屏幕尺寸).

通过组合它们,您可以拥有一些非常有趣的布局.
See this JSFiddle

在这里,我扩展了一点想法.尝试调整视图的大小,您将看到它会通过在命中小部件上组合多个col-YY-X类,根据宽度自动选择每行显示的大量结果.

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'
    }
  })
);

正如您所看到的,我还在项目模板中添加了一个内部类,以便能够将项目用作内部填充的包装,以避免命中粘在一起.我将边框应用于内部元素,因为向引导网格元素添加边距不是正确的解决方案.

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

<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>