twitter-bootstrap-3 - 结果在使用 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 s 和网格布局 col-{xs,sm,md,lg}-X (有关网格布局的更多信息 here )。
一个有趣的属性与 bootstrap就是如果你将一个块声明为 col-YY-X , 如果屏幕宽度低于 YY 关联的尺寸，它会自动扩展到全宽。
instantsearch.js 的小部件公开 cssClasses允许您自定义基础标记的类的参数。

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

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

在这里，我扩展了一点想法。尝试调整 View 大小，您会看到它通过组合多个 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'
    }
  })
);

如您所见，我还在 item 中添加了一个内部类。模板能够使用 padding 将该项目用作包装器内部以避免将命中粘在一起。我申请了 border到内部元素，因为添加 margin s 引导网格元素不是正确的解决方案。

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

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