jquery - css面包屑分成2行，如何在响应式中控制它？

Question

我有一个面包屑列表，它看起来像这样:

但是如果步骤太多或者在分辨率较低的设备上查看它就会崩溃并且变得丑陋，如下所示:

我的代码是这样的:

ul.breadcrumb li { 
padding-left: 5px;
}
ul.breadcrumb li::after {
  display: inline-block;
  color: #959fa5;
}
ul.breadcrumb li::after {
  content: '';
  height: 25px;
  width: 12px;
  background: url(/theme/base/pix/grey-white-grey2.png) no-repeat center center;
  vertical-align: middle;
}
ul.breadcrumb li {
  background-color:@color-gery-background;
}
ul.breadcrumb li:nth-last-child(2):after {
  content: '';
  height: 25px;
  width: 12px;
  margin-right: 0px;
  background: url(/theme/base/pix/grey-white-blue.png) no-repeat center center;
  vertical-align: middle;
}
ul.breadcrumb li:last-child{
  background-color: @color-blue;
  text-shadow: none;
  color: white!important;
}
ul.breadcrumb li:last-child a,
ul.breadcrumb li:last-child span
{
  text-shadow: none;
  color: white!important;
}
ul.breadcrumb li:last-child:after
 {
  content: ' ';
  height: 25px;
  width: 12px;
  vertical-align: middle;
  background: url(/theme/base/pix/blue-whitey.png) no-repeat center center;
}
ul.breadcrumb li > *:last-child::before,
.cd-multi-steps.custom-icons li > *::before {
  content: ' ';
  height: 25px;
  width: 12px;
  vertical-align: middle;
  background: url(/theme/base/pix/blue-whitey.png) no-repeat center center;
}

和 HTML

<ul class="breadcrumb">
  <li><a href="#">My home</a></li>
  <li><span>some text</span></li>
  <li><a href="#">Some link</a></li>
</ul>

由于我使用 Moodle，我无法在 li 上设置更多类，并且 li 的内容要么是链接，要么是仅包含文本的跨度。 (并且没有任何特定顺序)我可以以某种方式做到这一点，所以最后一个选项是模糊的，而不是像现在这样的图像 - 我尝试了一些带有边框三 Angular 形的其他示例，但它们也没有响应:-/

Answer 1

你能做什么？

1. 不要使用图像作为面包屑，而是使用 CSS
2. 在小屏幕上改变CSS，这样就不会难看了。

喜欢，

/* some breadcrumb basic code */

@media only screen and (max-width : 766px) {
    ... code for small devices ...
}

@media only screen and (min-width : 767px) {
    ... code for large devices ...
}

Check this fiddle并尝试调整结果窗口的大小

This is updated fiddle