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

     2023-03-06     223

关键词:

【中文标题】如何在 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>info@thememove.com</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

【讨论】:

如何在黄瓜中实现自定义监听器?

】如何在黄瓜中实现自定义监听器?【英文标题】:Howtoimplementcustomlistenersincucumber?【发布时间】:2021-12-2214:55:47【问题描述】:如何在cucumber中实现客户监听?哪个可以记录到控制台/报告失败方法的发生?使用黄瓜4.0注意:钩... 查看详情

如何在 keras 中实现自定义指标?

】如何在keras中实现自定义指标?【英文标题】:howtoimplementcustommetricinkeras?【发布时间】:2016-10-0601:13:54【问题描述】:我得到这个错误:sum()得到了一个意外的关键字参数\'out\'当我运行这段代码时:importpandasaspd,numpyasnpimportkera... 查看详情

WordPress JavaScript

】WordPressJavaScript【英文标题】:【发布时间】:2021-08-0414:31:27【问题描述】:我正在尝试在WordPress管理员自定义帖子的“发布Metabox”中实现自定义选项。我想知道是否有任何本地方式来展开/折叠div(查看下面的屏幕截图)。我... 查看详情

如何在 iPhone 中实现自定义相机功能? [关闭]

】如何在iPhone中实现自定义相机功能?[关闭]【英文标题】:HowtoimplementcustomcamerafunctionalityiniPhone?[closed]【发布时间】:2011-08-1605:07:13【问题描述】:我想开发一种功能,以便在iPhone应用程序中实现自定义相机功能,所以请给我... 查看详情

如何在 QT 中实现自定义模型的 removeRow() 函数?

】如何在QT中实现自定义模型的removeRow()函数?【英文标题】:HowtoimplementremoveRow()functionforcustomizedmodelinQT?【发布时间】:2016-03-2404:02:48【问题描述】:我已经搜索了QT文档以供参考,但我有一些问题。这是QTdoc中的实现:boolTableMo... 查看详情

如何在 UIImagePicker 中实现自定义“使用”和“重拍”按钮?

】如何在UIImagePicker中实现自定义“使用”和“重拍”按钮?【英文标题】:Howtoimplementcustom\'Use\'and\'Retake\'buttoninUIImagePicker?【发布时间】:2011-03-2507:06:04【问题描述】:我的意思是,我已经关闭了相机控制器pickerCam.showsCameraContro... 查看详情

如何在 ASP.NET Core 中实现自定义模型验证?

】如何在ASP.NETCore中实现自定义模型验证?【英文标题】:ASP.NETCore-Createcustommodelvalidation【发布时间】:2016-07-1215:07:56【问题描述】:在以前版本的ASP.NETMVC中,向模型添加自定义验证的方法是实现IValidatableObject并实现您自己的Val... 查看详情

如何在 JSON.NET 中实现自定义 JsonConverter?

】如何在JSON.NET中实现自定义JsonConverter?【英文标题】:HowtoimplementcustomJsonConverterinJSON.NET?【发布时间】:2011-12-2306:02:32【问题描述】:我正在尝试扩展此处给出的JSON.net示例http://james.newtonking.com/projects/json/help/CustomCreationConverter.... 查看详情

如何在android中实现自定义可折叠工具栏?

】如何在android中实现自定义可折叠工具栏?【英文标题】:HowtoimplementCustomCollapsableToolbarinandroid?【发布时间】:2015-11-2212:08:36【问题描述】:使用thistutorial实现灵活空间模式(带有折叠工具栏的模式)。我正在尝试实现与Lollipop... 查看详情

如何在 WCF 服务中实现自定义身份验证

】如何在WCF服务中实现自定义身份验证【英文标题】:HowtoImplementcustomauthenticationinWCFservice【发布时间】:2019-12-1403:26:43【问题描述】:我想为具有自定义身份验证的移动应用程序创建WCFrestful服务。第一个请求应该是登录,特别... 查看详情

在 kvm 中实现自定义超级调用

...拟化非常陌生,最近我一直在尝试熟悉VMM的操作方式以及如何进行超级调用。谈到我打算在安装在我的Ubuntu桌面上的KVM中实现一个新的超级调用,然后可以从来宾环境中调用。通过这个超级调用,我打算只返回一个字符串“HelloW... 查看详情

我们如何在 Laravel 中实现自定义的仅 API 身份验证

】我们如何在Laravel中实现自定义的仅API身份验证【英文标题】:HowdoweimplementcustomAPI-onlyauthenticationinLaravel【发布时间】:2020-09-1019:04:42【问题描述】:这不是一个非常需要答案的问题,但欢迎提供进一步的建议和答案和建议。我... 查看详情

如何在 TCPDF 中实现自定义字体

】如何在TCPDF中实现自定义字体【英文标题】:HowtoimplementcustomfontsinTCPDF【发布时间】:2011-07-1222:11:47【问题描述】:在TCPDF中,只有几种字体可供选择,用于创建pdf文件。我想将Tahoma设置为我的pdf字体。如何在TCPDF中包含Tahoma?... 查看详情

如何在 ASP.NET MVC 中实现自定义主体和身份?

】如何在ASP.NETMVC中实现自定义主体和身份?【英文标题】:HowdoIimplementcustomPrincipalandIdentityinASP.NETMVC?【发布时间】:2011-03-1711:30:25【问题描述】:我想在经过身份验证的用户中存储额外的信息,以便我可以轻松访问它(例如User.... 查看详情

如何在自定义 Spring 存储库中实现自定义方法? [复制]

】如何在自定义Spring存储库中实现自定义方法?[复制]【英文标题】:Howtoimplementcustommethodincustomspringrepository?[duplicate]【发布时间】:2016-03-2719:36:21【问题描述】:假设我想要一个方法,获取超级主客户,有id=0。我有客户类:@Ent... 查看详情

如何在 iOS 应用程序中实现自定义(平面图图像)地图..? [关闭]

】如何在iOS应用程序中实现自定义(平面图图像)地图..?[关闭]【英文标题】:HowdoIimplementacustom(floorplanimage)mapinaniOSapp..?[closed]【发布时间】:2012-03-0612:49:09【问题描述】:实现这一点的一些应用示例是..YorkdaleAppIconBrickell我是... 查看详情

在 Android 中实现自定义 ListView

...行布局创建了另一个布局文件,如下所示:问题是,我该如何实现呢?我在哪里设置所有必须在text中的字符串?注意中的那些?我在互联网上查看过,但我可以找到与我的listView相似的人。我 查看详情

如何在 webflux 中实现自定义身份验证管理器时对未经授权的请求响应自定义 json 正文

】如何在webflux中实现自定义身份验证管理器时对未经授权的请求响应自定义json正文【英文标题】:Howtoresponsecustomjsonbodyonunauthorizedrequestswhileimplementingcustomauthenticationmanagerinwebflux【发布时间】:2020-11-2703:52:15【问题描述】:我正... 查看详情