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

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

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

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

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

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内部的包装器，以避免命中相互粘连。我将 s 应用于border内部元素，因为将margins 添加到引导网格元素不是正确的解决方案。

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

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