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开发者工具中）

再次，没有图像，但它是bootstrap中的标准活动列表组。

我该怎么做？我是否需要在窗口小部件类中添加一个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>

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

1 个答案: