Question

我对此页面的侧边栏有疑问。我无法在响应版本中使用它，特别是在智能手机版本中。边栏仍然附在左边的内容上但不包裹

This是codepen的链接如果codepen不起作用，那么这就是网站的link。

archive-posts-w.with-sidebar .archive-sidebar {
    display: block !important;
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    max-width: 350px;
    bottom: inherit;
    right: inherit;
    clear: both;
    float: left;
}

Html肯定会有错误，因为它是网站wordpress源代码的副本。

Answer 1

首先在该td class =“test”

中添加类表td

td.test
{
 display:block
}

#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
      margin:0px!important;
}

#sb_instagram .sbi_header_text .sbi_bio，＃sb_instagram .sbi_header_text h3 在那个班级你有'保证金：0 0 0 60px！important;'你改变那个0px abd检查设备 http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait

Answer 2

这里有一些问题：

您的容器.archive-posts-w.with-sidebar有display: table;。对于较小的屏幕（即在媒体查询中），将其更改为display: block

侧边栏上方部分的CSS应该是这样的（对于较小的屏幕）：

.archive-posts-w.with-sidebar .archive-posts {
    display: block;
    vertical-align: top;
    width: 100%;
}

对于.archive-posts-w.with-sidebar .archive-sidebar，您的max-width设置为350px，也是从其他几个规则继承的，所以将此规则（对于较小的屏幕）更改为

.archive-posts-w.with-sidebar .archive-sidebar {
    display: block !important;
    position: relative;
    top: inherit;
    left: 0;
    width: 100%;
    max-width: none;/* <-- this one is changed */
    bottom: inherit;
    right: inherit;
    clear: both;
}

响应边栏在智能手机版中无法正常工作

2 个答案: