html - Shopify 更改集合的布局

Question

我想更改收藏页面的布局，现在只有一栏。我想每行至少 3 个。

Here is the existing layout

to something like this

1 :这是代码

  <div id="content" class="col-md-12 center-column content-with-background">
<div class="row">
 <div class="col-sm-12">
  {{page.content}}
 </div>
</div>
</div>

 {% comment %}
 Collections are listed here.
 {% endcomment %}

{% capture uses_minimal_framework %}{% include 'product-loop' %}{% endcapture %}

{% if uses_minimal_framework contains 'Liquid error' %}
{% assign uses_minimal_framework = false %}
 {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half large--col-3 medium--col-4 small--col-6' %}
{% else %}
{% assign uses_minimal_framework = true %}
{% assign grid_item_width = 'span3' %}
{% endif %}

{% assign image_size = 'medium' %}

{% if linklists[page.handle].links.size > 0 %}

{% assign number_of_links = 0 %}

<div class="grid-uniform{% if uses_minimal_framework %} row{% endif %} clearfix">

  {% for link in linklists[page.handle].links %}

  {% if link.type == 'collection_link' %}

    {% comment %}
    If we have a collection link.
    {% endcomment %}   

    {% assign collection = link.object %}
    {% assign number_of_links = number_of_links | plus: 1 %}

    <div class="grid__item grid-item product-grid-item {{ grid_item_width }} text-center">
      <div class="grid__image product-grid-image">
        <a href="{{ link.url }}" class="grid-image--centered">
        {% comment %}
          Bring in the featured image of the first product in the collection if no collection
          image has been uploaded for it.
        {% endcomment %}
        {% if collection.image %}
          <img src="{{ collection | img_url: image_size }}" alt="{{ link.title | escape }}">
        {% else %}
          {% assign product = collection.products.first %}
          <img src="{{ product | img_url: image_size }}" alt="{{ link.title | escape }}">
        {% endif %}
        </a>
      </div>
      <p class="collection-grid__item-title">
        <a href="{{ link.url }}" class="collection-item__title">{{ link.title }}</a>
      </p>
    </div>

    {% if uses_minimal_framework %}
      {% cycle 'clear-item': '', '', '', '<div style="clear:both"></div>' %}
    {% endif %}

  {% elsif link.type == 'page_link' %}

我不知道在哪里编辑代码，所以我复制了我认为它所在的部分。非常感谢。

Answer 1

尝试改变第三行

<div class="col-sm-12">

对此

<div class="col-md-12">

这应该调整它的大小以适应屏幕上的更多元素。