shopify中响应式设计的CSS问题

Question

我正在尝试在 shopify 中获得响应式页脚。困扰我的是：

 <ul class="footer-costume_ul site-footer__linklist{% unless section.settings.footer_newsletter_enable %} site-footer__linklist--center{% endunless %}">
            {% for link in linklists[section.settings.footer_linklist].links %}
              <li class="site-footer__linklist-item footer_pipe">
                <a class="footer_a" href="{{ link.url }}"{% if link.active %} aria-current="page"{% endif %}>{{ link.title }}</a>
              </li>
            {% endfor %}
          </ul>

页脚中的链接已生成，我正在管道中。

.footer-costume_ul{
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;

}


.footer_a {
     margin-left: 1rem;
}

.footer_pipe + .footer_pipe::before {
  padding-rigt:10px;
  content: "|";
}

当分辨率移动时，它不会显示正常，因为单词不会换行。

如何处理每 li 它会在需要时自动换行。

我设法得到这个：

但问题是我不知道如何正确地进行管道传输。谢谢。

tnx 米哈

Answer 1

如果我理解了您的问题，您有几个选择。我将假设您使用的是“移动优先”方法。只需将li 设置为block（该元素将“活”在自己的行上）或将其宽度设置为flex-basis: 100%。

.site-footer__linklist-item {
  display: block;
  width: 100%;
  /* flex-basis: 100%; // this is alternative */
}

@media screen and (min-width: 480px) {
   /* please note that 480px is arbitrary. You decide on the breaking point. */

  .site-footer__linklist-item {
    display: inline-block;
    width: auto
    /* flex-basis: auto; // you can use "auto" or "initial" */
  }
}

可能有十几种其他方法可以实现这一点，但要点是一样的。将元素定位为“移动”宽度，并使每个li 占据整行。

仅当没有足够的空间让两个元素一起存在时，Flex-wrap 才会打破界限。它不会自动换行（默认情况下）。希望这会有所帮助。