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 col-{xs,sm,md,lg}-X和网格布局bootstrap（有关网格布局here的更多信息）。
col-YY-X的一个有趣属性是，如果您将块声明为cssClasses，如果屏幕宽度低于YY所关联的尺寸，则会自动扩展到整个宽度。
instantsearch.js的小部件公开了一个root参数，允许您自定义基础标记的类。

要轻松完成两列，您只需要将cssClasses的{{1}}元素声明为.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'
    }
  })
);

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

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

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

1 个答案: