Question

我目前正在努力将新的Twenty Twelve Wordpress网站上的儿童主题放在一起。该网站具有流体/液体结构以实现其响应性（使用百分比而非固定宽度（以像素为单位） - 这与我可能必须为我的小部件设置样式有关。）

在我的模板顶部，我想要包含一个小部件区域，用户/管理员可以在列表中拖放可用小部件中的项目。

理想情况下，由于此部分的网站设计和布局位于水平面上，因此三个小部件在空间方面看起来很不错。

但是，如果用户想要添加更多，我认为我需要使用PHP或JavaScript来计算段标记中是否有一定数量的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网格视图完成。
完整的详细信息可以在HERE找到。

理论上，Bootstrap网格默认有12列。
如果您想连续使用3列，则将12除以4.
它将连续生成3列。您可以在Bootstrap Grid Link上看到示例。

水平设置Wordpress小部件

2 个答案: