如何在 WordPress 中实现自定义标头的引导小部件代码？

Posted 2023-03-06

【中文标题】如何在 WordPress 中实现自定义标头的引导小部件代码？

【英文标题】：How to can implement bootstrap widget code for custom header in WordPress?

【发布时间】：2019-07-17 03:22:25

【问题描述】：

我在网站上工作，我不是引导程序的专业人士。这是我的主题标题：

我想用 3 个小 png 图片替换地址，即 BBB A+ Accredited Business 和 Google Partner。

像这样：（Photoshop）

这是小部件代码：

<div class="col-xs-12 col-sm-9 col-lg-10 start-xs start-sm">
    <aside id="text-3" class="widget header-right widget_text">
        <div class="textwidget">
            <div class="container extra-info">
                <div class="row">
                    <div class="col-sm-5 col-md-5">
                        <i class="fa fa-phone"></i>
                        <div class="phone">
                            <h3>1-775-97-377</h3>
                            <span>[e-mail]</span>
                        </div>
                    </div>
                    <div class="col-sm-7 col-md-6">
                        <i class="fa fa-home"></i>
                        <div class="address">
                            <h3>14 Tottenham Court Road</h3>
                            <span>London, England.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </aside>
</div>

请告诉我哪些是我可以使用的正确标签和代码？ 我也有对齐问题！ col-md，我想隐藏在手机版中（可能是col-xs）

非常感谢您的帮助！

【问题讨论】：

您想用三个包含徽标的额外框替换地址 div 中的内容吗？

【参考方案1】：

尝试用另一行和三个 div 替换地址内容，如下所示。请记住，列最多需要添加 12 列才能使网格正常工作。

<div class="address">
<div class="row">
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
<div class="col-md-4">logo here</div>
</div>

另外关于隐藏列，我知道引导程序有多种方法可以通过添加它们的类来做到这一点，但也可以查看媒体查询。

@media only screen and (max-width: 960px) 
.whatever 
display:none;

https://www.w3schools.com/css/css_rwd_mediaqueries.asp