如何使用 Bootstrap 在侧边栏中设置 Wordpress 小部件的样式？

Question

我正在使用 Bootstrap 创建一个 Wordpress 网站。我已经注册了侧边栏并将插件（小部件）添加到侧边栏。我不知道如何正确设置它们的样式。

这就是我所拥有的： 我不能发布图片，因为我没有 10 个代表点。屏幕截图是现在显示的列表：具有标准布局的项目符号列表。

这是 HTML：

<aside id="recent_faqtax-2" class="widget recent-faqtax-widget"><h3 class="widget-title">FAQ</h3><ul>   <li class="cat-item cat-item-10"><a href="http://www.mysite/topics/packing/" title="View all posts filed under Packing">Packing</a>
</li>
    <li class="cat-item cat-item-8"><a href="http://www.mysite/topics/pricing/" title="View all posts filed under Pricing">Pricing</a>
</li>
    <li class="cat-item cat-item-11"><a href="http://www.mysite/topics/volume-2/" title="View all posts filed under Volume">Volume</a>
</li>
</ul></aside>

但是，我想使用 Bootstrap 创建这个：

<div class="list-group">
  <a href="#" class="list-group-item active">
    Packing
  </a>
  <a href="#" class="list-group-item">Pricing</a>
  <a href="#" class="list-group-item">Volume</a>
</div>

看起来像这样（在 Chrome 开发者工具中）

同样，没有图像，但它是引导程序中的标准活动列表组。

我该怎么做？我需要在 jQuery 中添加一个类到小部件类吗？我可以使用自定义 CSS 吗？

Answer 1

您可以手动修改生成插件的代码。但最简单的方法是在侧边栏中添加一个文本框，然后在其中手动编写代码。所以你会有类似的东西：

 <div class="list-group">
     <a href="#" class="list-group-item active">
    Packing
     </a>
     <a href="#" class="list-group-item">Pricing</a>
     <a href="#" class="list-group-item">Volume</a>
    </div>

在小部件框中并作为输出：

<aside id="recent_faqtax-2" class="widget recent-faqtax-widget">
<div class="list-group">
     <a href="#" class="list-group-item active">
    Packing
     </a>
     <a href="#" class="list-group-item">Pricing</a>
     <a href="#" class="list-group-item">Volume</a>
    </div>
</aside>