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

Question

我正在使用 Algolia instantsearch.js 进行搜索，为了显示我的结果页面，我正在使用 Bootstrap 3，我希望在 3 列中显示匹配：

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

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

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

qry
hit1
hit2
hit3
etc.

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

Answer 1

基本上，您想使用 bootstrap row 和网格布局 col-{xs,sm,md,lg}-X（有关网格布局的更多信息 here）。
一个有趣的属性和 bootstrap 是，如果你将一个块声明为 col-YY-X，如果屏幕宽度小于 YY 关联的尺寸，它会自动扩展到全宽。
instantsearch.js 的小部件公开了一个 cssClasses 参数，允许您自定义底层标记的 classes。

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

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

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

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

如您所见，我还在 item 模板中添加了一个内部 class，以便能够将该项目用作内部带有 padding 的包装，以避免命中彼此粘在一起。我将 border 应用于内部元素，因为将 margins 添加到 bootstrap 网格元素不是正确的解决方案。

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

<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 在多列中结果命中

result hits in multiple columns using Algolia and Bootstrap 3

twitter-bootstrap-3

algolia