水平样式化 Wordpress 小部件答案

【问题标题】：Styling Wordpress Widgets Horizontally水平样式化 Wordpress 小部件
【发布时间】：2016-12-02 19:19:58
【问题描述】：

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

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

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

但是，如果用户想添加更多内容，我认为我需要使用 PHP 或 JavaScript 来计算节标记中是否有一定数量的 div/类/id，例如，更改CSS 宽度从 33.33%（3 个小部件）到 25%（4 个小部件）或 50% 有两个等等。

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

【问题讨论】：

请不要删除您的原始问题 - 人们需要查看问题是什么，以便您选择的“最佳答案”有意义。

标签： php html css wordpress wordpress-theming

【解决方案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>

【讨论】：

尝试将它放在 header.php 文件的最顶部或最底部。如果这不起作用，指向实时或测试版本的链接也会有所帮助。
您可以尝试将floor(100/count($widgets['header-widget-area'])) 更改为仅100/count($widgets['header-widget-area'])，因为在以百分比形式使用小数时，CSS 支持小数。否则，我将直接使用 CSS 定位小部件，以根据需要应用任何其他规则。

【解决方案2】：

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

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

【讨论】：