如何使用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> 

然而，引導我想創建這樣的：

<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> 

在widget箱和輸出：

<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>