首页 文章

在Wordpress产品页面中更改侧边栏和内容的宽度

提问于
浏览 次
0

嗨亲爱的开发人员和设计师，

我在编辑基于wordpress的woocommerce模板时遇到了问题 . 我在我的网站上使用了ThemeForest中名为Neighborhood的woocommerce主题 .

所有我想知道的是如何编辑边栏和内容的宽度，（商店产品或邮政）主题是全宽和完全响应，所以显示的百分比将是伟大的而不是固定的像素 .

比例百分比或其他任何例如我的网站的这个页面http://aryagostarafzar.com/shop/digital-painting-pack2
你看到左边的侧边栏大约是整个宽度的1/3 . 我可以通过将此代码设为css来更改显示的侧边栏百分比：

.left-sidebar {
    width:20%;
 }

但内容不会自动适合较小的侧边栏，额外的空间仍然是免费的，不会被内容和侧边栏使用 .

请给我一个简短的css代码来设置两者 . 谢谢

wordpress css3 woocommerce themes

2 回答

  • 0

    看起来该网站正在使用旧版本的Bootstrap网格 . 侧栏宽度由标签上的“.span4”类确定 . 您需要增加或减少该span类以使其更小 .

    这也会增加或减少车身宽度 . Span 必须加起来为12.即span4和span8

    你可以在这里准备更多：http://getbootstrap.com/2.3.2/scaffolding.html

    回复于
  • 0

    这是我在styles.css中的bootstrap代码我没有找到“.span4”其他.span可用但没有按百分比定义，是由像素定义如何编辑我的朋友

    * #Custom Bootstrap Classes
    ==================================================         Support for columns width sidebars
==================================================
    .span-third {
    width: 193px;
    }
    .span-twothirds {
    width: 407px;
    }
    .span-bs-quarter {
    width: 100px;
    }
    .span-bs-threequarter {
    width: 340px;
    }

    @media only screen and (min-width: 1200px) {
    .span-third {
    width: 236px;
    }
    .span-twothirds {
        width: 504px;
    }
    .span-bs-quarter {
        width: 120px;
    }
    .span-bs-threequarter {
        width: 420px;
    }
}

@media only screen and (max-width: 979px) and (min-width: 768px) {

    .span-third {
        width: 145px;
    }
    .span-twothirds {
        width: 310px;
    }

    .span-bs-quarter, .span-bs-threequarter {
        width: 342px;
    }

}

@media only screen and (max-width: 979px) {

    .span-third {
        width: 100%;
    }
    .span-twothirds {
        width: 100%;
    }
    .span-bs-quarter {
        width: 100%;
    }
    .span-bs-threequarter {
    width: 100%;
    }     

}
    回复于

相关问题