水平設置Wordpress小部件

Question

我正在努力將新的Twenty Twelve Wordpress網站上的兒童主題放在一起。 該網站具有流體/液體結構以實現其響應性（使用百分比而不是像素中的固定寬度 - 這與我可能必須為我的小部件設置樣式有關）。

在我的模板的頂部，我想包括一個小部件區域，用戶/管理員可以從提供的列表中的可用小部件中拖放項目。

理想情況下，由於此部分的網站設計和布局位於水平面上，因此三個小部件在空間方面看起來很不錯。

但是，如果用戶想要添加更多，我認為我需要使用PHP或JavaScript來計算是否在section標簽中有一定數量的div / classes / id，例如，更改CSS寬度33.33％（3個小部件）到25％（4個小部件）或50％有兩個等等？

我如何能夠為每個小部件容納相等間距的寬度並將它們放在一起？

Answer 1

有點亂，但這是一個開始：

<?php
$widgets = wp_get_sidebars_widgets();
$percentage = !empty($widgets['header-widget-area']) ? floor(100/count($widgets['header-widget-area'])) : 100;
?>
<style type="text/css">
hgroup .widget{
    width:<?php echo $percentage; ?>% !important;
    float:left;
}
</style>

Answer 2

這可以使用Bootstrap網格視圖完成。
完整的詳細信息可以在這里找到。

理論上，Bootstrap網格默認有12列。
如果你想要連續3列，你將12除以4。
它將連續產生3列。 您可以在Bootstrap Grid Link上看到示例。