1

我正在尝试为 Justin Tadlock 为移动设备设计 Grid Columns 插件的样式。来源：https ://github.com/justintadlock/grid-columns

在我的css文件中，我想将.column-grid .column width移动设备设置为完整，并重置宽度min-width: 768px

.column-grid .column {
    float: left;
    margin-right: 5%;
    margin-left: 0;

    }

@media only screen and (min-width: 768px) {
.column-grid .column {

    }
}

我试过width: 100%vswidth: auto和display: blockvs display: inline。然而，它并没有成功。

请注意，实际的列宽是在.column-grid .column包装器中设置的。

关于如何巧妙地做到这一点的任何建议？

4

2 回答 2

0

我刚刚将插件 CSS 导入到我的样式表中，在

@media (min-width: 48em) {（768 像素）。

然后我取消注册插件排队的样式表，因为不需要两次提供相同的内容：

function remove_grid_columns() {
    wp_dequeue_style( 'grid-columns' );
}
add_action( 'wp_print_styles', 'remove_grid_columns' );

（少了 1 个 HTTP 请求，耶！）我认为这是最好的方法，唯一的事情就是记住在网格列更新时更新我的​​样式表。但是由于我使用的是 SASS，如果插件得到更新，我只需将更新的 columns.css 放入我的 grid_columns.scss 文件中。

于 2014-06-17T10:43:50.880 回答
0

如果您尝试在移动设备上垂直堆叠列并让它们在桌面上显示为列，请更改媒体查询：

@media only screen and (max-width: 768px) {
.column-grid .column {
 width: 100%;
 }
}

否则，我需要在上下文中查看您的标记。

于 2013-06-04T09:18:05.970 回答