引导山口宽

Question

请，先在第一列中的附加图像

一看我想20%，但是当我用col-md-2，其设置width: 16.6667% 我如何使用引导程序集列20%。 我是否需要制作自己的CSS或有自定义bootstraps3的方法

Answer 1

Bootstrap网格系统基于12列。 这里还有就是引导官方文档http://getbootstrap.com/css/#grid

COL-MD-2意味着你要分配的容器的总宽度的2/12，因此16.6667％

如果你想分配20 ％，你可以在col-md-2附近添加一个类并重写宽度，或者设置一个内嵌样式。 请注意，如果您设置20％不是12的倍数，那么只使用引导程序，近列不会拉伸到100％的宽度。

Answer 2

您必须使用自定义类（简单方法）或自定义Bootstrap网格系统。

为了创建你可以使用类似的自定义类：

.col-10p { 
    width: 100%; 
} 

.col-20p { 
    width: 100%; 
} 
@media screen and (min-width: 768px) { 

.col-10p { 
    width: 10%; 
    float: left; 
} 

.col-20p { 
    width: 20%; 
    float: left; 
} 
} 

然后，你将获得分别10％和20个％的宽度集装箱，将响应像COL-MD-* S。这些可以像col - * - *类一样使用。

如果你customize引导或覆盖默认的网格类，它会影响整个项目，并会产生意想不到的结果。

这样你就可以覆盖类：

.col-md-2 { 
    width: 10% !important; 
} 

由于使用!important不做事的好方法：你可以使用像另一种方法：

.width-10.col-md-2 { 
    width: 10%; 
} 

，这将给你想要的效果。只需在HTML中使用width-10类。