3

我目前正在从新的 212 Wordpress 网站上整合一个儿童主题。该网站的响应性具有流体/液体结构(使用百分比而不是像素的固定宽度 - 这与我可能必须如何设置小部件的样式有关)。

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

理想情况下,由于本节站点的设计和布局是在水平面上,因此三个小部件在空间上看起来会很好看。

但是,如果用户想添加更多,我认为我需要使用 PHP 或 JavaScript 来计算节标记中是否有一定数量的 div/classes/id,例如,将 CSS 宽度从33.33%(3 个小部件)到 25%(4 个小部件)或 50% 是否有两个等?

我如何能够为每个小部件提供等间距的宽度并将它们彼此相邻放置?

4

2 回答 2

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>
于 2012-10-25T23:07:16.643 回答
0

这可以使用 Bootstrap Grid View 来完成。
完整的细节可以在这里找到。

理论上,Bootstrap 网格默认有 12 列。
如果您想要连续 3 列,则将 12 除以 4。
它将连续产生 3 列。您可以在 Bootstrap Grid Link 上查看示例。

于 2016-01-29T12:47:11.283 回答