我会避免使用任何与核心相关的布局类,而只使用自己的布局类(这不需要引导)。在PHP页面处理程序中,只需执行以下操作:
<div class="wrap">
<div class="my-plugin-column">
How...
</div>
<div class="my-plugin-column">
you...
</div>
<div class="my-plugin-column">
doin\'?
</div>
<!-- And so forth -->
</div>
然后在插件CSS中:
@media screen and (min-width: 40em) {
.my-plugin-column {
float: left;
width: 30%;
}
/* first column */
.my-plugin-column:nth-child(3n+1) {
clear: left;
}
/* second and third columns */
.my-plugin-column:nth-child(3n+2),
.my-plugin-column:nth-child(3n+3) {
margin-left: 5%;
}
}
您可以更高级,在较小的断点处显示两列,然后在较大的设备上切换到三列。