如何使面包屑响应？答案

【问题标题】：How to Make Breadcrumb Responsive?如何使面包屑响应？
【发布时间】：2019-09-30 15:01:05
【问题描述】：

我的面包屑导航响应能力有问题。我需要更改面包屑大小，我的面包屑大小在桌面设备和移动设备上是相同的，我如何才能在移动设备上缩小面包屑大小...

我试过了

@media all and(max-width:500px){
     .breadcrumb{
          font-size: 10px;
     }
     .breadcrumb li a{
          padding:10px 0 10px 30px;
     }
}

我的面包屑代码

function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}

【问题讨论】：

也许您应该显示生成的 HTML 而不是 PHP，因为您的问题与前端相关（或者看起来如此）。
欢迎来到 Stack Overflow！请不要发布 PHP 函数。发布输出的 HTML。此外，我们需要看到更多的 CSS。也许有些东西正在压倒你的风格。请阅读：How to create a Minimal, Complete, and Verifiable example
您使用的主题名称是什么？

标签： php html css wordpress breadcrumbs

【解决方案1】：

尝试将此 CSS 添加到您主题的自定义 CSS：

@media (max-width: 860px) {
     .breadcrumb, .breadcrumbs li a, .breadcrumb a{
          font-size: 10px !important;
     }
     .breadcrumb li a{
          padding:0px;
     }
}

【讨论】：