Question

亲爱的开发者和设计师，
我在编辑基于wordpress的woocommerce模板时遇到了问题。我在我的网站上使用了来自ThemeForest的邻居的woocommerce主题。

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

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

.left-sidebar {
    width:20%;
 }

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

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

Answer 1

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

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

您可以在此处准备更多内容：http://getbootstrap.com/2.3.2/scaffolding.html

Answer 2

这是styles.css中的引导代码我找不到“.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%;
    }     

}

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

2 个答案: