结果在使用 Algolia 和 Bootstrap 3 的多列中命中 [英] result hits in multiple columns using Algolia and Bootstrap 3

问题描述

我使用 Algolia Instantsearch.js 进行搜索，并显示我的结果页面，我使用 Bootstrap 3，我希望点击显示在 3 列中:

qry |命中 1 |命中2|命中3 |命中 4|命中5 |命中6

(其中 qry = 搜索查询输入小部件)等等.

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

qry命中 1命中2命中3等等.

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

解决方案

基本上，你要使用 bootstrap rows 和 grid layout col-{xs,sm,md,lg}-X(有关网格布局的更多信息此处).
bootstrap 的一个有趣特性是，如果你将一个块声明为 col-YY-X，如果屏幕宽度低于 YY 关联的尺寸，它会自动扩展到全宽.
instantsearch.js 的小部件公开了一个 cssClasses 参数，允许您自定义基础标记的类.

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

通过组合它们，您可以拥有一些非常有趣的布局.
查看此 JSFiddle

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

search.addWidget(Instantsearch.widgets.hits({容器:'#hits'，模板:{空:'没有结果'，item: '<div class="hit">{{title}}</div>'},hitsPerPage: 6,css类:{根:'行'，项目:'col-lg-3 col-md-4 col-sm-6'}}));

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

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

<div id="search" class="row"><div class="col-sm-4"><div id="输入"></div>
<div class="col-sm-8"><div id="hits" class="row">

I'm using Algolia instantsearch.js for search, and to display my result page, I'm using Bootstrap 3, and I'd like hits to be displayed in 3 columns:

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

(where qry = the search query input widget) etc..

If it's mobile, it should display as:

qry
hit1
hit2
hit3
etc.

Can someone help me with the html/css I can use to implement this? Thanks!

解决方案

Basically, you want to use bootstrap rows and grid layout col-{xs,sm,md,lg}-X (More info about the grid layout here).
One interesting property with bootstrap is that if you declare a block as being col-YY-X, if the screen width is under the dimensions YY is associated with, it automatically expands to the full width.
instantsearch.js's widgets expose a cssClasses parameter that allows you to customize the classes of the underlying markup.

To easily do two columns, all you need to do is declare the root element of the cssClasses as being a .row, and each result as a .col-sm-6 (or .col-md-6 or .col-lg-6 depending on which screen size you want it to apply).

By combining them, you can have some really interesting layouts.
See this JSFiddle

Here, I've extended a bit the idea. Try to resize the view, and you'll see that it automatically picks a number of results to display per line depending on the width by combining multiple col-YY-X classes on the hit widget.

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

As you can see, I've also added an inner class to the item template to be able to use the item as a wrapper with padding inside to avoid having the hits glued to each other. I apply the border to the inner element, because adding margins to bootstrap grid elements is not the right solution.

The layout itself is really simple, you can just nest rows together:

<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 的多列中命中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！